使 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 .
当然,任何其他 jquery 代码/插件或 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()
}));
小提琴:http://fiddle.jshell.net/3ATzd/2/show/只是认为它不喜欢#scroller 上的边距顶部.我还删除了对 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屋!