ページをスクロールした後に要素のCSSの位置を変更する

Question

私は、あるjqueryでそれにぶつかることを試みています。

絶対位置が設定されているul navがありますが、ページを200ピクセル下にスクロールすると、navが常にページ上にとどまるように位置を固定に切り替えることができます。

どうすればよいですか？

以下

は、私がここで

Answer 1

おかげで

これは私が

http://www.defringe.com/

http://satbulsara.com/tests/

Thankssからそれを得た

$(document).ready(function() { 
    var theLoc = $('ul').position().top; 
    $(window).scroll(function() { 
     if(theLoc >= $(window).scrollTop()) { 
      if($('ul').hasClass('fixed')) { 
       $('ul').removeClass('fixed'); 
      } 
     } else { 
      if(!$('ul').hasClass('fixed')) { 
       $('ul').addClass('fixed'); 
      } 
     } 
    }); 
}); 

を望んでいたものです！ !!!

Answer 2

http://satbulsara.com/tests/

に取り組んでいます例です。私は「スティッキー」サイドバーを作成するために使用するコードです。マークアップに合わせてIDを変更する必要があります。

 
var sidebarScrollTop = 0; 

$(document).ready(function() { 
    sidebarScrollTop = $("#sidebar").offset(); 

    $(window).scroll(function() { 
     var docScrollTop = $('body,html').scrollTop(); 

     if(docScrollTop > sidebarScrollTop.top) { 
      $("#sidebar").css({ position: 'fixed', top: '0px' }); 
     } else { 
      $("#sidebar").css({ position: 'static' }); 
     } 
    }); 
}); 

$(window).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

$(document).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

基本的に、あなたがする必要があるのは、サイドバーのコンテナのIDのため#sidebarを変更です。このコードは、サイドバー要素が画面の上部を過ぎてスクロールされるかどうかを確認します。そうであれば、位置はfixedに変更され、ページ上に戻ると再び位置はstatic（デフォルト）に戻ります。

$(document).resize()と$(window).resize()の機能は、ドキュメント/ウィンドウのサイズをそれぞれ変更したときにサイドバーがページ上部に固執することを確実にします。ドキュメント関数は、要素のサイズを変更するjQueryアニメーションがあっても、サイドバーが正しく機能するようにします。助けてとても迅速であることのためにみんなに

Answer 3

私はthis jQuery pluginと書いてあります。