使div粘到屏幕的顶部，然后在敲击页脚之前停止 [英] make div stick to the top of the screen and stop before hitting the footer

问题描述

一旦用户开始向下滚动页面，我就试图将div粘贴到标题。
我发现了例子
如何在滚动到屏幕顶部后将div粘贴到屏幕顶部？

I'm trying to make a div stick to the header once the user has started scrolling down the page . I found the example how can I make a div stick to the top of the screen once it's been scrolled to?

我使用的代码有24票。 现场演示。

I used the code that has 24 votes . Live demo.

问题：
1.我想让div停在脚步之前。我不想显示它在页脚。
2.我不知道为什么这个工作与jquery 1.3.2，但不是与1.5.2或更高版本。

PROBLEMS : 1. I want to make the div stop before hitting the footer. i don't want to show it over the footer . 2. I don't know why this works with jquery 1.3.2 but not with 1.5.2 or a later version .

ofcourse任何其他jquery代码/ plugin或ideea会很棒！

ofcourse any other jquery code / plugin or ideea would be great!

推荐答案

$(window).load($(function()
{
    var elem = $("#scroller");
    var top = elem.offset().top;
    var maxTop = $("#footer").offset().top - elem.height();
    var scrollHandler = function()
    {
      var scrollTop = $(window).scrollTop();
      if (scrollTop<top) {
        elem.css({position:"relative",top:""})//should be "static" I think
      } else if (scrollTop>maxTop) {
        elem.css({position:"absolute",top:(maxTop+"px")})
      } else {
        elem.css({position:"fixed",top:"0px"})
      }
    }
    $(window).scroll(scrollHandler);scrollHandler()

}));

fiddle： http://fiddle.jshell.net/3ATzd/2/show/
只想到它不喜欢#scroller上的margin-top。我也删除了对scroller-anchor元素的需要，所以你可以删除这个。

fiddle: http://fiddle.jshell.net/3ATzd/2/show/ Only think is it doesn't like the margin-top on #scroller. I also removed the need for the scroller-anchor element, so you can remove this.

这篇关于使div粘到屏幕的顶部，然后在敲击页脚之前停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！