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

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

你的功能只作为事件侦听器运行，所以你必须首先手动运行它。试试这个代码：

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(); 

Answer 2

基本上，您需要对scroll和load事件都运行调整功能。 下面是一个例子：

(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);