我正在寻找一种方法,只有在向下滚动约170个像素后,才能将页面的#header元素定位为“已修复”。
标题上方是横幅,所以当人们向下滚动时,我希望横幅滚动,标题在点击窗口顶部时保持固定,页面内容在标题下方滚动。< / p>
答案 0 :(得分:12)
This是一般的想法,尽管你可能想稍微尝试一下css。
var header = $("#header");
$(document).scroll(function(e) {
if($(this).scrollTop() > $("#banner").height()) {
header.css({"position" : "fixed", "top" : "0"});
} else {
header.css("position", "relative");
}
});
答案 1 :(得分:1)
您需要检查不同的滚动位置:
var $header = $('#header'),
headerPos = $header.position().top,
$win = $(window);
$win.scroll(function() {
if ( $win.scrollTop() >= headerPos) {
$header.css({
'position':'fixed',
'top':0,
'width': '100%'
});
}
if ( $win.scrollTop() <= headerPos ) {
$header.css({
'position': 'static'
});
}
});
答案 2 :(得分:1)
Here是一个稍微简洁的版本:
var header = $('#header'),
bannerHeight = $('#banner').height(),
win = $(window);
win.scroll(function() {
header.css({ top: Math.max(Number(win.scrollTop() - bannerHeight), 0) });
});
答案 3 :(得分:1)
这是一个jquery插件的演示,负责处理这个问题。类似于John的上述答案,但该插件使解决方案更进一步。
插件和来源:https://github.com/bigspotteddog/ScrollToFixed
用法:
$(document).ready(function() {
$('.header').scrollToFixed();
});
答案 4 :(得分:0)
我认为这应该有效:http://jsfiddle.net/Skooljester/K2mFT/。但是,您需要在标题上定义宽度,否则当它变得固定时它会缩小。