如果不在頁面頂部，用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);