粘性導航腳本在瀏覽器調整大小後無法正常工作

Question

我發現了一個用於在網站上使用的粘性導航的jQuery腳本。

$(function() { 

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; 

    // the function that decides weather the navigation bar should have "fixed" css position or not 
    var sticky_navigation = function(){ 
     var scroll_top = $(window).scrollTop(); // the current vertical position from the top 

     // if user scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative 
     if (scroll_top > sticky_navigation_offset_top) { 
      $('#sticky_navigation').css({ 'position': 'fixed', 'top':-23, 'left':0 }); 
     } else { 
      $('#sticky_navigation').css({ 'position': 'relative', 'top':-30 }); 
     } 
    }; 

    // run the function on load 
    sticky_navigation(); 

    // and run it again every time you scroll 
    $(window).scroll(function() { 
     sticky_navigation(); 
    }); 
}); 

它只工作乾淨，如果我不加載網站後調整瀏覽器的大小。如果我做了調整大小，那麼腳本不知道新的大小，滾動時導航欄跳轉到不同的位置。我試圖添加一個

$(window).resize(function() { 
    sticky_navigation(); 
}); 

但它沒有做任何事情。

應該不難告訴腳本在調整大小後檢查頂部偏移量。 但我不是程序員，所以如果可以的話，請給我一些代碼示例的建議，而不僅僅是理論上的推理。

希望有人能幫助我。

編輯： 這裏的的jsfiddle例如： http://jsfiddle.net/p9Lvbz68/8/

Answer 1

1日嘗試定義不被外部sticky_navigation函數內部sticky_navigation_offset_top

第二次嘗試使用$(window).on('scroll resize',function() {

使你的代碼應該像

$(document).ready(function() { 

    // the function that decides weather the navigation bar should have "fixed" css position or not 
    var sticky_navigation = function(){ 
     // grab the initial top offset of the navigation 
     var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; 

     var scroll_top = $(window).scrollTop(); // the current vertical position from the top 

     // if user scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative 
     if (scroll_top > sticky_navigation_offset_top) { 
      $('#sticky_navigation').css({ 'position': 'fixed', 'top':-23, 'left':0 }); 
     } else { 
      $('#sticky_navigation').css({ 'position': 'relative', 'top':-30 }); 
     } 
    }; 

    // run the function on load 
    sticky_navigation(); 

    // and run it again every time you scroll 
    $(window).on('scroll resize',function() { 
     sticky_navigation(); 
    }); 
}); 

Answer 2

設置'top'： - 23在你的CSS中不會搞亂if條件中的數學嗎？即如果偏移量爲負值且最低的滾動條可爲0，則滾動頂部不能小於偏移量？ （我沒有檢查這是否是實際行爲）。

Console.log（scroll_top）; Console.log（sticky_navigation_offset_top）;

線之後：

變種scroll_top = $（窗口）.scrollTop（）;

如果在調整大小後在滾動控制檯中查看消息，應該可以幫助您測試此理論。

儘管這無法解釋爲什麼它的工作原理之前調整...

-------編輯---------

在看着你的小提琴，你跳躍發生了，因爲當你修改某些東西時，你可以有效地從頁面佈局中刪除它。不可避免的是，您的內容會變得更短，頁面會顯示跳躍。

我的意思是一個例子。 http://jsfiddle.net/snn0xj4h/。我在頁眉的頂部添加了一個邊距來說明跳躍（不是真正的解決這個問題的正確方法，但它可能在短期內適用於您）。

if (scroll_top > sticky_navigation_offset_top) { 
     $('#sticky_navigation').css({ 'position': 'fixed', 'top':"-23px", 'left':0 }); 
     $('#header').css("margin-top", $('#sticky_navigation').height()); 
    } else { 
     $('#sticky_navigation').css({ 'position': 'relative', 'top':"-30px" }); 
     $('#header').css("margin-top", 0); 
    }