首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果不使用jquery,如何在用户滚动100px后显示div?

如果不使用jQuery,可以使用原生JavaScript来实现在用户滚动100px后显示div的效果。

首先,可以使用window对象的scroll事件来监听用户滚动行为。每当用户滚动页面时,触发scroll事件,我们可以在事件处理函数中进行相应的逻辑判断。

首先,需要获取到用户滚动的距离。可以使用window对象的scrollY属性来获取当前滚动的垂直距离。然后,可以使用一个变量来保存div是否已经显示的状态。

接下来,在scroll事件处理函数中,可以判断滚动距离是否超过了100px,如果超过了,就将div的display属性设置为"block"以显示它,否则将其设置为"none"以隐藏它。

以下是一个示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>Scroll Div Demo</title>
    <style>
        #myDiv {
            display: none;
            width: 200px;
            height: 200px;
            background-color: #f1f1f1;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>

    <script>
        var myDiv = document.getElementById("myDiv");
        var isDivVisible = false;

        window.addEventListener("scroll", function() {
            var scrollDistance = window.scrollY;

            if (scrollDistance > 100 && !isDivVisible) {
                myDiv.style.display = "block";
                isDivVisible = true;
            } else if (scrollDistance <= 100 && isDivVisible) {
                myDiv.style.display = "none";
                isDivVisible = false;
            }
        });
    </script>
</body>
</html>

在这个示例中,通过监听window对象的scroll事件,实时获取用户滚动的垂直距离,然后根据这个距离来判断是否显示div。当用户滚动距离超过100px时,将div显示出来;当用户滚动距离不足100px时,将div隐藏起来。

这是一个简单的示例,你可以根据实际需求对div的样式和显示逻辑进行相应的修改。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

31分41秒

【玩转 WordPress】腾讯云serverless搭建WordPress个人博经验分享

领券