原型：滚动时保持元素可见答案

【问题标题】：prototype: keep an element in view upon scrolling原型：滚动时保持元素可见
【发布时间】：2023-04-02 07:06:01
【问题描述】：

我想在页面滚动时在视口中保留一个 div 元素。我目前正在使用 jquery 使用这个 sn-p：

$（函数（）{ 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 }); }; }); });

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

-- 我想要什么-- 元素在其顶部边框到达视口顶部时立即停止，没有动画，没有滑翔，没有 nuttin'。

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

【问题讨论】：

标签： jquery scroll

【解决方案1】：

我目前正在做一些与此非常相似的事情，以便在长表的顶部保留一个小摘要信息标题。基本上，当您滚动过去 X（在本例中为 180 像素）时，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');
        }
    }
}

【讨论】：

我将如何编辑此代码以使元素在滚动时缓慢滑动并弹回原位？

【解决方案2】：

我刚刚完成了一个插件，它也可以做到这一点。我在尝试将元素的位置从固定位置更改为绝对位置并在它到达视口的顶部或底部时再次返回时遇到问题。它在不同的屏幕分辨率下对我不起作用，因为我需要设置 left 属性。基本上只需引用插件并在要滚动的元素上调用它：

$myDiv.fixposition({boundingElement:myBoundary}) //myBoundary 是您希望滚动 div 保留在其中的元素。


/**
 * Enables an element to be fixed in position within a specified bounding element.
 * Usage: $("#myElementToBeFixed").fixposition();
 * Provide a data structure with the following elements if you want to override the defaults:
 *  boundingElement - the element to limit the fixed position within
 *  bottomOffset - the amount to bufferhe fixed element from the bottom (of the specified bounding element)
 */
(function($) {
$.extend($.fn, {
    fixposition: function(opts) {
        return this.each(function() {
            var defaults = {
                boundingElement: "",
                bottomOffset: 20
            };                        
            var options = defaults;

            if (typeof(options) != 'object') options = { };
            options = $.extend(options, opts);
            $this = $(this);

            var $boundEl = $("#" + options.boundingElement);
            var bottomBound = $boundEl.offset().top + $boundEl.height();
            var maxTop = bottomBound - $this.height() - options.bottomOffset;
            var minTop = $this.offset().top;
            var newTopPos = null;
            var parentTopOffset = $this.parent().offset().top;

            if($("body").length > 0 && options.boundingElement != "") {
                $(window).scroll(function () {
                    var scrollY = $(window).scrollTop();

                    if($this.length > 0) {
                        if ($this.offset().top != (scrollY - parentTopOffset)) {                            
                            newTopPos = scrollY - parentTopOffset;
                        }

                        if (newTopPos != null) {
                            if (newTopPos > maxTop - parentTopOffset) {
                                newTopPos = maxTop  - parentTopOffset - options.bottomOffset;
                            } else if (newTopPos < minTop - parentTopOffset) {
                                newTopPos = minTop - parentTopOffset;
                            }

                            $this
                                .stop()
                                .css({"top": newTopPos});
                        }
                    }
                });
            }
        });
    }

}); 
})(jQuery);

【讨论】：