原型：滚动时保持元素在视图中

Question

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

  
        $(函数() {
            var offset = $("#column-menu").offset();
            var topPadding = 25;
            $(窗口).scroll(函数() {
                if ($(window).scrollTop() > offset.top) {
                    $("#column-menu").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } 别的 {
                    $("#column-menu").stop().animate({
                        边距顶部：25
                    });
                };
            });
        });
    

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

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

它应该兼容 ie6、ie7 和 ie8...任何建议（即使有原型）都会很棒。谢谢。

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