Question

我正在尝试添加多个样式更改点，如果我滚动浏览某个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个样式更改点。

有人可以帮我一把吗？

提前致谢

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

Answer 1

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

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

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-block 你可以拥有任意数量的if-blocks 最后你可以有一个可选的else-block

你筑巢的条件。

Answer 2

回答托马斯 -

<!DOCTYPE html>
<html>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

        <script>


        var currentTime = new Date();

        if (currentTime.getHours() >=15 && currentTime.getMinutes() >=30) {
            $(document).ready(function() {
                $('#datepicker').datepicker({
                        minDate: 1,						
                    beforeShowDay: noSunday
                  });

                  function noSunday(date){
                      var day = date.getDay();
                                  return [(day > 0), ''];
                  }; 
            });
        } else {
            $(document).ready(function() {
                $('#datepicker').datepicker({
                        minDate: 0,						
                    beforeShowDay: noSunday
                  });

                  function noSunday(date){
                      var day = date.getDay();
                                  return [(day > 0), ''];
                  }; 
            });
        }
        </script>
    </head>
    <body>
        <form>
            <input id="datepicker" />
        </form>
    </body>
</html>

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

Answer 3

您应该使用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":""}); } } } });

根据页面

3 个答案: