我有一个这样的页面:
----------------------
.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/