jQuery:当特定div溢出滚动100px时显示元素?

发布于 2024-12-05 02:53:25 字数 887 浏览 4 评论 0原文

通常我在我的一些项目中使用它。

    //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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

满意归宿 2024-12-12 02:53:25

您可以使用 scrollLeft() 来确定位置

所以您想做类似的事情

$('#slider').scrollLeft() > 100

You can use scrollLeft() to determin the position

So you would want to do something like

$('#slider').scrollLeft() > 100
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文