Question

我正在尝试研究如何在屏幕滚动到某个点时，或者浏览器窗口缩小到一定大小时，有一个更改某些css的函数。

我个人每个人都在工作，但是当我跟随另一个人时，一个会超越另一个。

以下是我正在使用atm：

    $(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height > 300){
    $('.navbar-default .nav li a').css("color","#f6f6f6");
    }
    else{
    $('.navbar-default .nav li a').css("color","#4B00B3");
    }
});

 $(window).resize(function() {
    var width = $(window).width();

    if(width < 768) {
    $('.navbar-default .nav li a').css("color","#f6f6f6");
    }
    else{
    $('.navbar-default .nav li a').css("color","#4B00B3");
    }
});

所以我想简单地将导航栏字体设置为300px滚动的灰色（＃f6f6f6），当屏幕超出768px宽时。否则是深紫色（＃4B00B3）。

我尝试过将这些结合起来，但我不确定如何将.resize和.scrollTop事件与||正确结合起来条件陈述。

非常感谢任何帮助。

Answer 1

您可以将它们组合成一个函数，然后将该函数传递给resize和scroll事件。

var navbarDefault = $('.navbar-default .nav li a');

$(window).resize(toggleColor).scroll(toggleColor);

function toggleColor(){
    var height = $(window).scrollTop();
    var width = $(window).width();

    if(width < 768 || height > 300) {
        navbarDefault.css("color","#f6f6f6");
    }
    else {
        navbarDefault.css("color","#4B00B3");
    }
}

jQuery双条件语句 - 滚动高度或宽度执行此操作

1 个答案: