如何在我的「粘性」導航上設置偏移量？

我的網站上有65px高的固定標題。我有一個大約3/4的輔助導航，我想在我的頭部滾動到底部時修復它。如何在我的「粘性」導航上設置偏移量？

我已經使用Josh Lee's answer on this post來獲得功能，但是，由於我的標題是固定的，所以二級導航會滾動到它的右側，一旦碰到頁面的頂部就會固定。

由於它完全繞過我的標題，我怎樣才能爲觸發器設置一個偏移量，使它從屏幕頂部出現65px？

在我<head>：

<script> 
function moveScroller() { 
    var move = function() { 
     var st = $(window).scrollTop(); 
     var ot = $("#scroller-anchor").offset().top; 
     var s = $("#mydiv"); 
     if(st > ot) { 
      s.css({ 
       position: "fixed", 
       top: "65px" 
      }); 
     } else { 
      if(st <= ot) { 
       s.css({ 
        position: "relative", 
        top: "" 
       }); 
      } 
     } 
    }; 
    $(window).scroll(move); 
    move(); 
} 
</script>

在我的網頁：

<div id="scroller-anchor"></div> 
<div id="mydiv" class=""> 
    <ul class="wrap"> 
     <li> ... </li> 
     <li> ... </li> 
     <li> ... </li> 
     <li> ... </li> 
    </ul> 
</div> 
<script type="text/javascript"> 
    $(function() { 
    moveScroller(); 
    }); 
</script>

來源

2015-01-15 Paul Ruocco

我相信你會需要考慮的空間，當你正在檢查時，改變位置固定，例如改變不可變爲

var ot = $("#scroller-anchor").offset().top - 65;

來源

2015-01-15 19:40:58

我們在同一時間評論：D - 我假設這和我的回答完全相同。嘗試了它，它的工作原理。謝謝！ – 2015-01-15 19:45:15

我不知道這是否可以被認爲是「正確」的方式解決了我的問題，但它似乎對我有效......我將top:-65px添加到scroller-anchor元素。

<div id="scroller-anchor" style="top: -65px;"></div>

來源

2015-01-15 19:43:20

這實際上是將您的Scroller錨定在頁面上方65px，通過將-65變量添加-65，腳本只是希望儘快更改位置65px。 – 2015-01-15 19:48:36

如何在我的「粘性」導航上設置偏移量？

回答

相關問題