javascript - 在自定义 div 上滚动时显示隐藏元素

标签 javascript jquery

我有一个这样的页面:

----------------------
.header
----------------------


.content
   .hidden-element (fixed right side)


----------------------
.footer
----------------------

我想当您仅在内容部分滚动时显示隐藏元素。

例如,您开始从标题部分向下滚动。当您来到内容部分时,隐藏的元素将会出现。如果您再次向下滚动并来到页 footer 分,隐藏元素将再次隐藏。

我怎样才能做到这一点?

最佳答案

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {

                $('.myDiv').hide(1000);
            }
            else {
                $('.myDiv').show(1000);
            }
        });
    </script>
    <br />
    <div style="height:400px"></div>

    <div class="myDiv">
        <ul>
            <li>Arunachal Pradesh</li>
            <li>Himachal Pradesh</li>
            <li>Uttar Pradesh</li>
            <li>Madhya Pradesh</li>
            <li>Andhra Pradesh</li>
        </ul>
    </div>

    <div style="height:1000px"></div>
</body>
</html>

请检查上面的代码 这个示例代码非常简单 2 主要功能 $(窗口).scroll() 是检测页面的滚动事件 if($(this).scrollTop() > 300) 当超过 300 时,检查从页面顶部滚动的像素,然后隐藏 div 或在其他条件下显示 div。

关于javascript - 在自定义 div 上滚动时显示隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55429127/

相关文章:

javascript - jQuery 类验证有效!但返回 "property ' 长度' of null“错误?

javascript - JQuery:为什么即使使用 Prop 和 Attr 也无法启用 HTML 按钮?

javascript - 退出确认弹窗

javascript - 如何使用 Promise 处理失败的 ajax 请求

javascript - 当所有div元素设置为显示:none时运行函数

ajax - 更改jquery中的缓存时间

javascript - 如何在CSS中应用特定的滚动尺寸

javascript - 使用 JavaScript 随机获取浅色

javascript - 根据单元格值设置 SlickGrid 单元格样式

javascript - 在等待 Promise 时切换 AngularJS View