滚动div直到页脚顶部

我一直在寻找这个几天，但仍然没有快乐！滚动div直到页脚顶部

我想有一个固定位置的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和客户端将添加文本的页面，以便第二个值将根据改变什么他们补充道。

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

感谢，

来源

2014-04-02 DannyBoy

如果您的的底部边缘您必须检查滚动事件低于页脚。如果是，请将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。

来源

2014-04-02 12:47:05 Cristy

小提琴看起来不错，但我认为你可以缓存浮动容器jquery对象 – Huangism

更新 - >添加了一个更短的实现。 – Cristy

如果我想让浮动容器始终位于屏幕底部而不是顶部？（但在页脚处停止） –

刚才看了页脚位置上方时加载页面：

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

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

，然后使用它作为一个触发器：

if (scrollVal < footerTop) { }

来源

2014-04-02 12:42:44

滚动div直到页脚顶部

回答

相关问题