gpt4 book ai didi

javascript - jquery 滚动限制。?

转载 作者:太空宇宙 更新时间:2023-11-03 23:48:23 26 4
gpt4 key购买 nike

这里我试图让我的两个 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com