向下滚动页面后更改元素css位置

我正在搞乱一些试图抓住它的jquery。

我有一个绝对位置设置的ul导航，但在我向下滚动200个像素后，我希望切换到固定的位置，以便导航始终保持在页面上。

我该怎么办？

下面是我正在研究的例子

http://satbulsara.com/tests/

Answer 1

感谢大家的帮助

这就是我想要的

 $(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'); } } }); }); 

我得到了它

http://www.defringe.com/

http://satbulsara.com/tests/

Thankss !!!!!

Answer 2

我写了这个jQuery插件来做到这一点。

Answer 3

这是我用来创建“粘性”侧边栏的代码。 您需要修改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动画更改元素的大小，文档function也将确保侧栏正常工作。