下にスクロールする方法

Question

jQueryはあまり経験がありませんので、私が最近成し遂げようとしていることに苦労しています。

ウィンドウの一番下にあるnavが上に届くとスティックするようにします。

What it should look like before and after scrolling.

私のような方法を試してみました：

var stickyNavTop = $('nav').offset().top; 

$(window).scroll(function() { 
    if ($(window).scrollTop() > stickyNavTop) { 
     $('nav').addClass('fixed'); 
    } 
    else { 
     $('nav').removeClass('fixed'); 
    } 
}); 

Here is the entire HTML and CSS

すべてのヘルプははるかに高く評価されたが、ありがとうございました。

Answer 1

あなたがチェックする必要があるのは、画面の上部にあるチェックする要素のオフセットの上端を確認することだけです。そうであれば、固定された位置とトップ0を持つ新しいクラスを追加するだけです。

jsFiddle：https://jsfiddle.net/6jczdjdj/

$(function() { 
    var distance = $('.navbar').offset().top, 
    $window = $(window); 

    $window.scroll(function() { 
    $('.navbar').toggleClass('fixedtop', $window.scrollTop() >= distance) 
    }); 
});