滚动时固定的位置通过一定数量的像素
我正在寻找一种方法，只有在向下滚动大约170个像素后，才能将页面的#header元素定位为“固定”。
标题上方是一个横幅，所以当人们向下滚动时，我希望横幅滚动，标题在点击窗口顶部时保持固定，页面内容在标题下方滚动。
http://jsfiddle.net/tdskate/zEDMv/
这是一般的想法，虽然你可能想稍微用css捏造。
var header = $("#header"); $(document).scroll(function(e) { if($(this).scrollTop() > $("#banner").height()) { header.css({"position" : "fixed", "top" : "0"}); } else { header.css("position", "relative"); } }); 您需要检查不同的滚动位置：
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' }); } });
这是一个稍微简洁的版本：
var header = $('#header'), bannerHeight = $('#banner').height(), win = $(window); win.scroll(function() { header.css({ top: Math.max(Number(win.scrollTop() - bannerHeight), 0) }); });
这是一个jquery插件的演示，可以解决这个问题。 类似于John的上述答案，但该插件使解决方案更进一步。
演示： http ： //jsfiddle.net/ZczEt/
插件和来源： https ： //github.com/bigspotteddog/ScrollToFixed
用法：
$(document).ready(function() { $('.header').scrollToFixed(); });
我认为这应该有效： http ： //jsfiddle.net/Skooljester/K2mFT/ 。 但是，您需要在标题上定义宽度，否则它会在固定时缩小。