Question

我希望在滚动页面时在视口中保留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
                    });
                };
            });
        });

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

下降

- 我想要的是 - 一旦其顶部边框到达视口的顶部，该元素就会停止，没有动画，没有滑动也没有坚持。

它应该是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');
        }
    }
}

Answer 2

我刚刚完成了一个也会这样做的插件。尝试将元素的位置从固定更改为绝对时，无论何时触及视口的顶部或底部，我都会遇到问题。由于我需要设置左侧属性，因此在不同的屏幕分辨率下它对我不起作用。基本上只需引用插件并在要滚动的元素上调用它：

$ 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);

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

2 个答案: