画面上部に到達したときにdivをページ上部に固定する

Question

divがページの上部に達するとサイドバーをページに固定しようとしています。私は次のコードを持っている（下記参照）、それは動作している..種類...正しい位置にクラスを追加しない？誰か何が悪いことを知っていますか？ページへ

リンク：http://www.bluemoontesting.co.uk/bluemoon2016/people.html

$(document).ready(function() { 
    var s = $(".timeline"); 
    var pos = s.position();      
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 

     if (windowpos >= pos.top) { 
      s.addClass("timeline-fixed"); 
     } else { 
      s.removeClass("timeline-fixed"); 
     } 
    }); 
}); 

Answer 1

以下jqueryのスニペットを使用してください。これにより、クラス '.wrapper'を持つ要素がscrollに従うようになります。つまり、常にページの上部に表示されます。あなたの場合、オフセットを調整する必要があるかもしれません。

var nav = $('.wrapper'); 
     var navHomeY = nav.offset().top; 
     var isFixed = false; 
     var $w = $(window); 
     $w.scroll(function() { 
      var scrollTop = $w.scrollTop(); 
      var shouldBeFixed = scrollTop > navHomeY; 
      if (shouldBeFixed && !isFixed) { 
      nav.css({ 
       position: 'fixed', 
       top: 0, 
       left: nav.offset().left, 
       width: nav.width() 
      }); 
      isFixed = true; 
      } 
      else if (!shouldBeFixed && isFixed) 
      { 
      nav.css({ 
       position: 'static' 
      }); 
      isFixed = false; 
      } 
     });