这里我试图让我的两个 id 的 #stop,#stop2 即使在滚动后也能固定，并让我的 #stop3 滚动到它到达 #footer 一旦它到达 #footer 两个 #stop, #stop2 应该停止滚动。在我的这里如果 #stop,#stop2 都滚动到 #footer 这不应该发生，我不知道我哪里错了，任何已接受帮助。提前致谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.one{width:100px;border:1px solid #CCC;height:200px;float:left;margin:0px 20px;background:#F00;}
.footer{width:100%;height:800px;background:#339;clear:both;}
</style>
</head>
<body>
<div class="scroller_anchor"></div>
<div id="stop" class="one"></div>
<div class="one" id="stop3" style="height:2000px;">
</div>
<div id="stop2" class="one"></div>
<div class="scroller_anchor1"></div>
<div class="footer" id="footer"></div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;
var scroller_anchor1 = $(".scroller_anchor1").offset().top;
if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed')
{
$('#stop,#stop2').css({
'position': 'fixed',
'top': '0px'
});
$('#stop').css({
'left':'4%'
});
$('#stop2').css({
'right':'2%'
});
$('#stop3').css({
'left':'16.6%'
});
$('.scroller_anchor').css('height', '50px');
}
else if ($(this).scrollTop() > scroller_anchor1 && $('#stop,#stop2').css('position') != 'relative' )
{
$('#stop,#stop2,#stop3').css({
'position': 'relative',
'left':'inherit',
'right':'inherit'
});
}
else if ($(this).scrollTop() < scroller_anchor && $('#stop,#stop2').css('position') != 'relative' )
{
$('.scroller_anchor').css('height', '0px');
$('#stop,#stop2,#stop3').css({
'position': 'relative',
'left':'inherit',
'right':'inherit'
});
}
});
</script>
</html>
这是我的 fiddle jsfiddle.net/xPdD7
最佳答案
出于测试目的，我已经稍微修改了您的 js 代码，但所有硬编码值都可以根据您的特定需求进行更改:
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;
var scroller_anchor1 = $(".scroller_anchor1").offset().top;
var footer = $(".footer").offset().top;
if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed')
{
$('#stop,#stop2').css({
'position': 'fixed',
'top': '8px'
});
$('#stop2').css({
'left':'280px'
});
$('#stop3').css({
'left':'140px'
}); }
if (($(this).scrollTop()+200) > footer )
{
$('#stop,#stop2').css({
'position':'absolute',
'top':'1800px'
});
}
});
这里还有一个更新的 fiddle :http://jsfiddle.net/xPdD7/8/
这就是您要达到的目标吗？
关于javascript - jquery 滚动限制。？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20949277/