Question

我有以下代码，一旦元素scrollTop大于数字，就将div的位置更改为fixed。我试图修改这个脚本或找到一个不同的解决方案，以便div将在某个范围内滚动并在某个点滚动停止（因此div不会离开页面或与页脚元素重叠。

我不知道正确的方法是说IF scrollTop大于150然后position = fixed，如果它大于600，那么position会回到绝对位置，或者如果有更好的方法，比如距离底部......

我使用的是MooTools，而不是jQuery。我知道有一些jQuery选项/插件可以做到这一点。提前致谢！

window.onscroll = function()
{
    if( window.XMLHttpRequest ) { // IE 6 doesnt implement position fixed nicely...     
        if (document.documentElement.scrollTop > 150) {
            $('tabber').style.position = 'fixed';
            $('tabber').style.top = '0';

        } else {

            $('tabber').style.position = 'absolute'; 
            $('tabber').style.top = 'auto';


        }
    }
}

Answer 1

上面的脚本在很多层面都是错误的。

不要使用window.onscroll，而是使用window.addEvent("scroll", function() {});

缓存选择器。当元素没有改变时，在每个滚动上使用$("tabber") 3次是很昂贵的。

只需var tabber = $("tabber")并参考。

你不需要做

$("tabber").style.position  = ... 
$("tabber").style.top  = ...

做的：

tabber.setStyles({
    position: "fixed",
    top: 12123,
    right: 24
});

有这样的mootools插件，例如David Walsh的scrollSpy：http://davidwalsh.name/mootools-scrollspy

它允许您在到达各种滚动目的地或事件时设置脚本事件，请查看示例。

或者你可以自己写一下，例如，我花了15分钟来做： http://jsfiddle.net/dimitar/u9J2X/（观看http://jsfiddle.net/dimitar/u9J2X/show/） - 当它达到页脚的20 px时，它会停止修复。如果再次向上滚动，则返回固定状态。

根据页面滚动更改div位置

1 个答案: