jQuery:当特定div溢出滚动100px时显示元素?
通常我在我的一些项目中使用它。
//Back to top
$(window).scroll(function () {
if ( $(window).scrollTop() > 100 ) {
$('#back-to-top').fadeIn('fast');
} else {
$('#back-to-top').fadeOut('fast');
}
});
$(window).scroll();
这意味着每当用户从顶部向下滚动 100px 时,从后到上的箭头就会淡入。
这次我在 div 内有一个水平滚动条,其 overlow-x
设置为自动
。看起来像这样……
<section id="slider" class="horizontal">
<!-- Some Images that are floated left -->
<div id="back-to-left"></div>
</section>
.horizontal {
overflow-x: auto;
white-space: nowrap;
padding: 20px 0;
}
所以它只是一个 div,并排有很多图像,并且在该 div 的底部有一个水平滚动条。
我只想在这个 div 内部滚动到某个值时显示这个 #back-to-left
按钮 - 也许又像 100px。
在这种情况下我该怎么做?
感谢您的帮助。
normally I use this on some of my projects.
//Back to top
$(window).scroll(function () {
if ( $(window).scrollTop() > 100 ) {
$('#back-to-top').fadeIn('fast');
} else {
$('#back-to-top').fadeOut('fast');
}
});
$(window).scroll();
This means whenever a user scrolls more like a 100px down from the top a back-to-top arrow is fading in.
This time I have a horizontal scrollbar inside a div that has it's overlow-x
set to auto
. Looks like this…
<section id="slider" class="horizontal">
<!-- Some Images that are floated left -->
<div id="back-to-left"></div>
</section>
.horizontal {
overflow-x: auto;
white-space: nowrap;
padding: 20px 0;
}
So it's just a div with a lot of images side by side and a horizontal scrollbar at the bottom of this div.
I only want to show this #back-to-left
button when I scroll inside of this div over a certain value - maybe again like 100px.
How can I do that in this case?
Thank you for your help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以使用
scrollLeft()
来确定位置所以您想做类似的事情
You can use
scrollLeft()
to determin the positionSo you would want to do something like