在滾動時將一個div貼到固定導航欄上

Question

我正在嘗試製作一個web響應頁面，並且當我向下滾動頁面時，我的問題是將一個div捕捉到固定導航欄中。

https://jsfiddle.net/56jkmvma/1/

根據窗口大小或縮放，那麼div會要麼沖和下衝的導航欄。

我最好的嘗試是使用scrollTop（）來防止scrollTop（value）匹配內容div與導航欄相符的值時進一步滾動頁面，但它僅適用於100％縮放和硬編碼值。

jQuery的

$(window).scroll(function() { 
    var winHeight = $(window).height(); 
    var navHeight = $('.nav').height(); 
    var stopPoint = winHeight - navHeight;// gives position where scrollTop should stop allowing the div to 'snap' to the nav bar 
    var scrollPos = $(window).scrollTop(); 

    if (scrollPos == stopPoint) { 
    $(window).scrollTop(stopPoint); 
    } 
}); 

我也試圖用錨和scrollTo（），但從來沒有得到一個正常工作。打開任何方法，謝謝！

Answer 1

如果我沒有理解好，您正在尋找這樣的事情Example

，代碼：

$(document).ready(function(){ 

    var heightNav=$('.nav').height(); 
    var posCon=$('.content').offset().top; 
    var posWin; 
    $(window).on('scroll',function(){ 
    posWin=$(this).scrollTop()+heightNav; 

    if(posWin > posCon){ 
     $('.content').css({ 
     position: 'fixed', 
     top: heightNav, 
     'margin-top':0 

     }); 

    } 

    else { 
     $('.content').css({ 
     position: 'relative', 
     'margin-top':'20em', 
     top:0 

     }); 
    } 

    }); 

});