滚动页面后更改元素的CSS位置

Question

我正在尝试使用jQuery进行一些操作以了解其功能。

我有一个ul导航，它已经被设置为绝对定位，但在我将页面向下滚动200个像素后，我想将其更改为固定定位，以便导航始终停留在页面上。

我应该如何实现这个效果呢？

下面是我正在操作的示例：

http://satbulsara.com/tests/

- sat

---

为什么不默认使用 position:fixed？ - Sotiris

将位置设置为“固定”而不是“绝对”。 - Neil

好，但我想要导航向下滚动到一定点后切换为固定位置，我该如何让jquery实现这个效果？ - sat

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

谢谢！！！

- sat

Answer 2

我编写了这个jQuery插件来实现此功能。

- Chris Heald

---

太棒了！如果可以的话，我下一个项目一定会考虑使用它 :-) - Bojangles

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; });

基本上，您只需要更改#sidebar的ID为边栏容器的ID。此代码将查看边栏元素是否滚动到屏幕顶部之后。如果是，则将其位置更改为固定，当它再次返回页面时，位置将返回到默认状态即静态。 $(document).resize()和$(window).resize()函数将确保边栏在文档/窗口调整大小时保持在页面顶部固定。文档功能将确保边栏正确工作，即使您有jQuery动画也会更改元素的大小。

- Bojangles

---

谢谢詹姆斯，这几乎是我要找的，我想能够将导航向上滚动一点，然后让它固定+当我向上和向下滚动时，它似乎会闪烁。 - sat

感谢詹姆斯指引我正确的方向，但这正是我所寻找的。 - sat

@sat - 我在开发的网站上使用它，它运行良好。如果它闪烁，也许尝试将侧边栏放在一个 div 容器内。 - Bojangles