根据页面上的滚动位置进行多种样式更改

Have multiple style changes based on scroll position on page

本文关键字：样式 位置 滚动      更新时间：2023-09-26

我试图添加多个样式更改点，如果我滚动经过某个div，我尝试修改我拥有的单个样式更改脚本，但所有尝试都失败了。

脚本-

var targetOffset = $("#contentstart").offset().top - 100;
var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset ) {   
        $('.mainnav').css({"background":"#016FBA"});
        $('.mainnav').css({"height":"50px"});
        $('button.navtoggle').css({"margin":"5px auto"});
        $('ul.mainlinks a').css({"color":"#ffffff"});
        $('ul.mainlinks a:hover').css({"color":"#000000"})
    } else {
      $('.mainnav').css({"background":""});
      $('ul.mainlinks a').css({"color":""});
        $('ul.mainlinks a:hover').css({"color":""});
        $('.mainnav').css({"height":""});
        $('button.navtoggle').css({"margin":""});
    }
});

理想情况下，我想再添加3个样式更改点。

有人能帮我一下吗？

提前感谢

编辑（更多信息）当我滚动浏览视差网站的不同区域时，我希望导航栏改变颜色。例如，它一开始是半透明的，然后一旦我进入"关于"部分，它就会变成灰色和橙色，这就是问题所在。我希望它也能在我的技能部分、博客部分改变颜色，最后在联系部分改变颜色。我尝试的是该脚本的副本，但有一个不同的目标div。

所以在回答你的问题时，不，我不知道如何写出多个条件。

好吧，这是我们可以解决的问题。这是多个条件的语法。

if(condition1){
    //gets executed if condition1 is true
}else if(condition2){
    //if condition1 is false but condition2 is true
}else if(condition3){
    //if condition1 and 2 are false but condition3 is true
}else{
    //if none of these conditions are true
}

你总是需要一个if块你可以拥有任意数量的其他if块最后你可以有一个可选的其他块

你的窝条件。

回答Thomas-

var targetOffset = $("#contentstart").offset().top - 100;
var targetOffset2 = $("#skillset").offset().top;
var targetOffset3 = $("#mywork").offset().top;
var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset ) {   
        $('.mainnav').css({"background":"#767676"});
        $('.mainnav').css({"height":"50px"});
        $('button.navtoggle').css({"margin":"5px auto"});
        $('ul.mainlinks a').css({"color":"#FFC330"});
        $('ul.mainlinks a:hover').css({"color":"#000000"})
    } 
    else if($w.scrollTop() > targetOffset2){
        $('.mainnav').css({"background":"#fff"});
        $('.mainnav').css({"height":"50px"});
        $('button.navtoggle').css({"margin":"5px auto"});
        $('ul.mainlinks a').css({"color":"#000"});
        $('ul.mainlinks a:hover').css({"color":"#000000"})
    }
    else if($w.scrollTop() > targetOffset3){
        $('.mainnav').css({"background":"#666"});
        $('.mainnav').css({"height":"50px"});
        $('button.navtoggle').css({"margin":"5px auto"});
        $('ul.mainlinks a').css({"color":"#000"});
        $('ul.mainlinks a:hover').css({"color":"#000000"})
    }else {
      $('.mainnav').css({"background":""});
      $('ul.mainlinks a').css({"color":""});
        $('ul.mainlinks a:hover').css({"color":""});
        $('.mainnav').css({"height":""});
        $('button.navtoggle').css({"margin":""});
    }
});

使用这种格式，这是我所写的，然而，这只是第一个if语句被读取。

您应该使用elseif而不是else if

尝试；

var targetOffset = $("#contentstart").offset().top - 100;
var targetOffset2 = $("#skillset").offset().top;
var targetOffset3 = $("#mywork").offset().top;
var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset ) {   
        $('.mainnav').css({"background":"#767676"});
        $('.mainnav').css({"height":"50px"});
        $('button.navtoggle').css({"margin":"5px auto"});
        $('ul.mainlinks a').css({"color":"#FFC330"});
        $('ul.mainlinks a:hover').css({"color":"#000000"})
    } 
    elseif($w.scrollTop() > targetOffset2){
        $('.mainnav').css({"background":"#fff"});
        $('.mainnav').css({"height":"50px"});
        $('button.navtoggle').css({"margin":"5px auto"});
        $('ul.mainlinks a').css({"color":"#000"});
        $('ul.mainlinks a:hover').css({"color":"#000000"})
    }
    elseif($w.scrollTop() > targetOffset3){
        $('.mainnav').css({"background":"#666"});
        $('.mainnav').css({"height":"50px"});
        $('button.navtoggle').css({"margin":"5px auto"});
        $('ul.mainlinks a').css({"color":"#000"});
        $('ul.mainlinks a:hover').css({"color":"#000000"})
    }else {
      $('.mainnav').css({"background":""});
      $('ul.mainlinks a').css({"color":""});
        $('ul.mainlinks a:hover').css({"color":""});
        $('.mainnav').css({"height":""});
        $('button.navtoggle').css({"margin":""});
    }
});

编辑

那么你可以试试这个，另一种方法。

var targetOffset = $("#contentstart").offset().top - 100;
var targetOffset2 = $("#skillset").offset().top;
var targetOffset3 = $("#mywork").offset().top;
var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset ) {   
        $('.mainnav').css({"background":"#767676"});
        $('.mainnav').css({"height":"50px"});
        $('button.navtoggle').css({"margin":"5px auto"});
        $('ul.mainlinks a').css({"color":"#FFC330"});
        $('ul.mainlinks a:hover').css({"color":"#000000"})
    }else{ 
        if($w.scrollTop() > targetOffset2){
            $('.mainnav').css({"background":"#fff"});
            $('.mainnav').css({"height":"50px"});
            $('button.navtoggle').css({"margin":"5px auto"});
            $('ul.mainlinks a').css({"color":"#000"});
            $('ul.mainlinks a:hover').css({"color":"#000000"})
        }else{
            if($w.scrollTop() > targetOffset3){
                $('.mainnav').css({"background":"#666"});
                $('.mainnav').css({"height":"50px"});
                $('button.navtoggle').css({"margin":"5px auto"});
                $('ul.mainlinks a').css({"color":"#000"});
                $('ul.mainlinks a:hover').css({"color":"#000000"})
            }else{
                $('.mainnav').css({"background":""});
                $('ul.mainlinks a').css({"color":""});
                $('ul.mainlinks a:hover').css({"color":""});
                $('.mainnav').css({"height":""});
                $('button.navtoggle').css({"margin":""});
            }
        }
    }
});
相关文章：