jquery - 原型(prototype): keep an element in view upon scrolling

Question

我想在页面滚动时在视口(viewport)中保留一个 div 元素。我目前正在使用 jquery 使用此代码片段:

          $(function() {            var offset = $("#column-menu").offset();            var topPadding = 25;            $(window).scroll(function() {                if ($(window).scrollTop() > offset.top) {                    $("#column-menu").stop().animate({                        marginTop: $(window).scrollTop() - offset.top + topPadding                    });                } else {                    $("#column-menu").stop().animate({                        marginTop: 25                    });                };            });        });    

效果很好，但发生的情况是元素在滚动时消失，然后从顶部下降

--我想要什么--一旦元素的顶部边框到达视口(viewport)顶部，元素就会停止，没有动画，没有滑动，没有任何坚果。

它应该兼容 ie6、ie7 和 ie8...任何建议(即使是原型(prototype))都会很棒。谢谢。

Answer 1

我目前正在做与此非常类似的事情，以在长表的顶部保留一些摘要信息标题。基本上，当您滚动经过 X(在本例中为 180px)时，div 就会重新定位到页面顶部。如果您向后滚动超过 X，那么 div 将被设置回其原始位置。没有动画，没有多余的装饰!

window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 180 || self.pageYOffset > 180) {
            $('#StickyHeader').css('position','fixed');
            $('#StickyHeader').css('top','0');
        } else if (document.documentElement.scrollTop < 180 || self.pageYOffset < 180) {
            $('#StickyHeader').css('position','absolute');
            $('#StickyHeader').css('top','0px');
        }
    }
}