Question

我正在搞乱一些试图掌握它的jquery。

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

我该怎么做？

下面是我正在处理的例子

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

我写了this jQuery plugin来做到这一点。

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动画改变了元素的大小，文档功能也能确保侧边栏正常工作。

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

3 个答案: