jquery - 如何使元素跟随页面到一个点？答案

【问题标题】：jquery - How to make an element follow the page to a point?jquery - 如何使元素跟随页面到一个点？
【发布时间】：2009-07-28 12:11:20
【问题描述】：

我需要使一个元素通常（取决于分辨率）离开页面可视区域的底部，浮动在页面底部并在滚动时跟随页面向下（在类似于 position:fixed in css 的效果。

但是我需要那个元素在它到达它本来应该自然的位置时停止并停留在它的位置，如果这有任何意义的话！

理想情况下，如果不支持 css/js，该元素也应该出现在其“自然”位置。

关于处理这个问题的最佳方法有什么想法吗？任何人都知道任何可能有帮助的现有 jQuery 插件吗？

非常感谢，

学习

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

这是我在客户网站上完成此操作的方式：

JavaScript（使用 jQuery）：

if( !$.browser.msie || ($.browser.msie && $.browser.version > 6) ){
    $('body').append('<div id="listener" rel="generated">&nbsp;</div>');
    $(window).scroll(function () { 
        if($('#listener').offset().top > 150){
            $('body:not(.fixmenu)').addClass('fixmenu');
        }else{
            $('body.fixmenu').removeClass('fixmenu');
        }
    });
}

CSS：

#listener{
    position: fixed;
    top: 0;
    right: 0;
    height: 1px;
    width: 1px;
}
#page #submenu{
    position: absolute;
    top: 85px;
    z-index: 3;
}
.fixmenu #submenu{ position: fixed; }

技巧：动态生成一个不可见的“监听器”div，在页面右上角固定定位。当该侦听器距离页面顶部 150 像素（或在此处插入任意数字）或更多像素时，将“fixmenu”类添加到<body>。从这里开始，使用 CSS 将菜单的位置从绝对位置更改为固定位置。

由于IE6不支持固定定位，所以选择排除。

【讨论】：

值得注意：因为我写了这段代码，jQuery 弃用了 $.browser。您可能需要考虑 $.support 作为替代方案。