Question

我一直在寻找这个，但仍然没有快乐！

我希望将div滚动到固定位置，直到它到达页脚顶部。

这是我到目前为止的一个小提琴：http://jsfiddle.net/danieljoseph/uk4mC/

我使用这个JQuery代码，但是它使用像素来确定div何时停止。我想使用页脚顶部作为停止点：

$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
$('#floating-container').css('top',scrollVal+'px');
if (scrollVal < 50) { 
    $('#floating-container').css('top','50px');
}
if (scrollVal > 2347) {
    $('#floating-container').css('top','2347px');    
}
});

问题是我正在使用CMS，客户端将向页面添加文本，因此第二个值将根据添加的内容而改变。

我希望我已经足够清楚了！如果您需要更多详细信息，请告诉我。

谢谢，

Answer 1

如果div的下边缘低于页脚，则必须检查滚动事件。如果是，请将div放在footer的位置减去div的高度。

$(function(){
    var container = $('#floating-container');
    var minTop = $('header').outerHeight();
    var maxTop = $('footer').offset().top - container.outerHeight(); 

    $(document).scroll(function() {
        var scrollVal = $(document).scrollTop();

        container.css('top', scrollVal);

        if (scrollVal < minTop) { 
            container.css('top', minTop);
        }

        if (container.offset().top > maxTop ) {
            container.css('top', maxTop );    
        }
    });
});

<强> Fiddle

而且，上面脚本的一个更短的变体：

$(function(){
    var container = $('#floating-container');
    var minTop = $('header').outerHeight();
    var maxTop = $('footer').offset().top - container.outerHeight(); 

    $(document).scroll(function() {
        container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
    });
});

Short version fiddle

Answer 2

加载页面时，只需阅读页脚顶部的位置：

http://jsfiddle.net/uk4mC/1/

var footerTop = $('#text-block').position().top;

然后将其用作触发器：

if (scrollVal < footerTop) { }

滚动div直到页脚顶部

2 个答案: