Question

我正在使用jQuery在滚动后更改Bootstrap导航栏的CSS元素。我遇到的问题是，如果您将页面加载到页面顶部后面的任何位置，则在向下滚动之前菜单不会变小 - 使用以下代码：

var a = $(".nav").offset().top;

$(document).scroll(function(){
    if($(this).scrollTop() > a)
    {   
       $('.navbar-fixed-top').css({"background":"#fff"});
       $('.navbar-fixed-top').css({"transition":"0.5s"});
       $('.navbar-fixed-top li a').css({"padding-top":"20px"});
       $('.navbar-fixed-top li a').css({"padding-bottom":"20px"});
    } else {
       $('.navbar-fixed-top').css({"background":"transparent"});
       $('.navbar-fixed-top').css({"transition":"0.5s"});
       $('.navbar-fixed-top li a').css({"padding-top":"40px"});
       $('.navbar-fixed-top li a').css({"padding-bottom":"40px"});
    }
});

我一直在尝试更改它，以便如果它不在页面的顶部，它将执行scrollTop代码，但没有运气。

Answer 1

基本上，您需要在scroll和load事件上运行adjust函数。这是一个例子：

(function($) {
    var a = $(".nav").offset().top;

    var adjust = function () {
        if($(document).scrollTop() > a) {   
           $('.navbar-fixed-top').css({"background":"#fff"});
           $('.navbar-fixed-top').css({"transition":"0.5s"});
           $('.navbar-fixed-top li a').css({"padding-top":"20px"});
           $('.navbar-fixed-top li a').css({"padding-bottom":"20px"});
        } else {
           $('.navbar-fixed-top').css({"background":"transparent"});
           $('.navbar-fixed-top').css({"transition":"0.5s"});
           $('.navbar-fixed-top li a').css({"padding-top":"40px"});
           $('.navbar-fixed-top li a').css({"padding-bottom":"40px"});
        }
    }

    $(document).scroll(adjust);
    $(function() { adjust; })
})(window.jQuery);

Answer 2

您的函数仅作为事件侦听器运行，因此您必须先手动运行它。试试这段代码：

var a = $(".nav").offset().top;

function scrollListener(){
    if($(document).scrollTop() > a)
    {   
       $('.navbar-fixed-top').css({"background":"#fff"});
       $('.navbar-fixed-top').css({"transition":"0.5s"});
       $('.navbar-fixed-top li a').css({"padding-top":"20px"});
       $('.navbar-fixed-top li a').css({"padding-bottom":"20px"});
    } else {
       $('.navbar-fixed-top').css({"background":"transparent"});
       $('.navbar-fixed-top').css({"transition":"0.5s"});
       $('.navbar-fixed-top li a').css({"padding-top":"40px"});
       $('.navbar-fixed-top li a').css({"padding-bottom":"40px"});
    }
};

$(document).scroll(scrollListener);

scrollListener();

如果不是在页面顶部，用jQuery更改CSS

2 个答案: