滚动后显示div，并在页面末尾隐藏div
是一种常见的前端开发技术，用于在网页滚动时控制某个div元素的显示和隐藏。
实现这个效果可以通过监听页面的滚动事件，当滚动到一定位置时，显示目标div，否则隐藏目标div。
以下是一个实现滚动后显示div，并在页面末尾隐藏div的示例代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<style>
#targetDiv {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #f1f1f1;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="targetDiv">这是要显示的div</div>
<div style="height: 2000px;"></div>
<script src="script.js"></script>
</body>
</html>JavaScript代码（script.js）：
window.addEventListener('scroll', function() {
var targetDiv = document.getElementById('targetDiv');
var scrollHeight = document.documentElement.scrollHeight;
var clientHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + clientHeight >= scrollHeight - 100) {
targetDiv.style.display = 'none';
} else {
targetDiv.style.display = 'block';
}
});上述代码中，通过监听scroll事件，获取页面的滚动高度scrollTop、可视区域高度clientHeight和页面总高度scrollHeight。当滚动到页面末尾时（滚动高度加上可视区域高度大于等于页面总高度减去一个阈值），隐藏目标div；否则显示目标div。
这种滚动后显示div的效果常用于网页底部的浮动工具栏、回到顶部按钮等场景。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云前端开发相关产品：云开发
- 腾讯云后端开发相关产品：云函数
- 腾讯云软件测试相关产品：云测试
- 腾讯云数据库相关产品：云数据库 MySQL
- 腾讯云服务器运维相关产品：云服务器 CVM
- 腾讯云云原生相关产品：容器服务 TKE
- 腾讯云网络通信相关产品：私有网络 VPC
- 腾讯云网络安全相关产品：Web 应用防火墙 WAF
- 腾讯云音视频相关产品：云直播
- 腾讯云多媒体处理相关产品：云点播
- 腾讯云人工智能相关产品：智能图像处理
- 腾讯云物联网相关产品：物联网开发平台
- 腾讯云移动开发相关产品：移动推送
- 腾讯云存储相关产品：对象存储 COS
- 腾讯云区块链相关产品：区块链服务 BaaS
- 腾讯云元宇宙相关产品：腾讯云元宇宙解决方案
相关·内容
我试图在向下滚动1500px后显示div，并且我想在页面滚动到90%时隐藏div (所以，几乎在页面末尾)。 } else {
$('#sample')
浏览 12提问于2017-08-18得票数 1
回答已采纳
我有一个div，它会在滚动到100px后隐藏，但如果他们在滚动到180px或这样的显示时刷新整个页面，在我开始滚动后不久，它就会恢复隐藏。我如何处理这种情况，即使在刷新后，如果页面滚动到100px以上也不显示以下是我用来隐藏div的脚本，我可以对此脚本更好地处理此问题
$(window).scroll(func
浏览 0提问于2016-02-23得票数 0
是否可以通过向下滚动到HTML末尾的方式按类名计算div的数量？我有一个页面要抓取，但我每次都需要向下滚动才能计算“隐藏”div的数量，这是在我向下滚动页面后出现的。我有以下document.getElementsByClassName('Class_Name').length，但它要求我每次在页面上向下滚动。我想在浏览器控制台上做这件事。这个是可能的吗？
浏览 15提问于2020-12-08得票数 0
1回答
我已经知道如何在经过滚动位置时显示div。div ddmenubg2隐藏，然后在超过该标记的任何地方，div保持可见...在这个标记之前的任何东西，div都是隐藏的。这只会在第一次页面加载或刷新时发生，在您多次上下滚动后都能正常工作，但每当您刷新页面时，此问题就会发生，直到您向下滚动。现在，这个问题的一个简单解决方法是使ddmenubg2 div
浏览 2提问于2012-11-18得票数 3
回答已采纳
有6个div都有相同的类。我如何才能使页面上只显示前3个div，当用户滚动到页面底部时，会显示其他3个div？
而且，可能并不总是只有6个div。假设有12个div，代码仍然需要显示前3个div，并在用户滚动到页面底部时继续显示另外3个div。<div class=&q
浏览 2提问于2015-07-08得票数 0
2回答
我正在寻找一个解决方案，当用户(水平)滚动时显示div，并在用户停止滚动时隐藏div。我发现了一些显示div的代码，但在滚动后并没有隐藏它。
浏览 0提问于2012-09-16得票数 0
2回答
我已经编写了一个jQuery-script，它应该在页面完全加载后运行。它应该跳到页面的末尾，隐藏一个div，并在稍加延迟后向上滚动一个动画。问题是，如果我试图重新加载页面，它不会以任何方式滚动，但会按预期运行其他所有内容。
这两个.scrollTop()会互相残杀吗？
浏览 4提问于2013-05-03得票数 0
回答已采纳
问题是，当我向下滚动这个GridView并选择底部的一些行时，会发生选择，但整个GridView会滚动回到顶部。
我使用来解决我的问题，但是在GridView控件中找不到任何属性。我也会在上搜索。选中复选框后，启用删除和编辑按钮。
浏览 2提问于2012-12-28得票数 0
我试图在滚动动画完成后显示一个div，并在页面上/下滚动时隐藏它。活动类在动画完成后被移除，而不是使用滚动运动。提前感谢
浏览 2提问于2016-11-04得票数 1
回答已采纳
我想隐藏完整的id或哈希从我的一个项目的URL，但我找不到任何解决方案后，在互联网上搜索。实际上，问题与滚动到div有关。我编写了一个JS代码，它在单页应用程序中工作，而没有在URL栏中显示id，但问题是我想用另一个页面超链接特定的div或主页的部分。这意味着当用户从另一个页面单击该链接时，用户应该在加载主页后被重定向或滚动到特定的div，此时JavaScript失败。没有JS -
(例如:我的链接
浏览 2提问于2022-08-13得票数 0
因此，我有两个div，它们占用相同的页面高度(每个height=50%)。<div class="first" id="first" style="height:50%;"></div>
<div class="second" id="second" style="height:50%; display:none;&qu
浏览 3提问于2015-08-16得票数 0
回答已采纳
我有一个长的div，它是用显示的。这是一个基于离子的样品。
单击按钮使longDiv显示或隐藏。如果您试图在隐藏或显示页面后立即滚动页面。有时，即使在longDiv隐藏之后，您也可以发现页面可以向下滚动。有时即使在longDiv显示之后，页面也无法向下滚动。但是，如果您等待几秒钟，然后尝试滚动
浏览 5提问于2016-01-05得票数 8
回答已采纳
2回答
我已经创建了一个web应用程序，在我的索引页面中有一个搜索按钮。当用户单击搜索按钮时，我希望使用JQuery fadeOut效果显示消息。但是，当我刷新或重新加载隐藏的div标记所显示的索引页时，它将显示索引页。我怎么才能阻止这一切。这是我的密码，你能帮我解决这个问题吗？
<div id="hidden_div" class="hidd
浏览 0提问于2013-07-31得票数 0
回答已采纳
注意，中央容器与页面滚动条一起滚动，将链接容器保持在左侧和右侧的固定位置。滚动到容器底部后，页面的其余部分将被滚动以显示页脚。到目前为止，我已经尝试了put溢出:自动放在中央容器和外部容器上。我隐藏了中央容器的滚动条，只显示了外部容器的滚动条(即页面)。因此，我可以滚动页面和中央容器分开。当页面被滚动<
浏览 0提问于2020-09-28得票数 0
回答已采纳
3回答
我在网上看到过很多关于通过向下滚动隐藏地址栏来隐藏地址栏的脚本，但我注意到苹果实际上完全隐藏了它，就像让它消失一样！我该怎么做呢？谢谢
浏览 1提问于2011-12-30得票数 1
回答已采纳
3回答
当用户滚动并到达页面底部时，我希望隐藏div元素，并在用户滚动回滚时再次显示它。例如，考虑下面的导航栏，它名为"nav“。HTMLCSS width:100%; position:fixed;当滚动到网页底部时，我想隐藏navd
浏览 11提问于2015-08-01得票数 5
回答已采纳
3回答
我使用这个脚本隐藏一个div，并在滚动过页面中的某个点时显示它。这是很好的工作，但当我滚动回顶部，div然后保持可见。有人能帮我修改一下代码吗?当我在期望的点上方滚动时，可以再次隐藏div吗？谢谢你，T$("#dvid").hide(); //hide your div ini
浏览 7提问于2017-06-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
