当向下滚动页面时，如何让粘滞/固定的导航栏在其上方隐藏div？
要实现当向下滚动页面时，让粘滞/固定的导航栏在其上方隐藏div，可以通过以下步骤来实现：
- 首先，使用CSS将导航栏设置为固定定位（position: fixed），使其始终保持在页面的顶部或底部。
- 使用JavaScript监听页面滚动事件（scroll event），当页面滚动时触发相应的函数。
- 在滚动事件的处理函数中，获取滚动的垂直距离（scrollTop），可以使用document.documentElement.scrollTop或document.body.scrollTop来获取。
- 判断滚动的垂直距离是否超过了某个阈值，如果超过了阈值，则隐藏导航栏上方的div，可以通过修改div的样式（例如设置display: none）来实现隐藏。
以下是一个示例的代码实现：
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #f1f1f1;
padding: 10px;
}
.content {
margin-top: 50px; /* 为了避免导航栏遮挡内容，给内容区域添加上边距 */
}
.hidden-div {
display: block;
height: 200px;
background-color: #ccc;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="navbar">导航栏</div>
<div class="content">
<h1>页面内容</h1>
<div class="hidden-div">隐藏的div</div>
<!-- 更多内容 -->
</div>
<script>
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.navbar');
var hiddenDiv = document.querySelector('.hidden-div');
var threshold = 200; // 设置滚动阈值，超过该值时隐藏div
if (window.pageYOffset > threshold) {
hiddenDiv.style.display = 'none';
} else {
hiddenDiv.style.display = 'block';
}
});
</script>
</body>
</html>在上述示例中，通过CSS将导航栏设置为固定定位，然后使用JavaScript监听滚动事件，在滚动事件的处理函数中判断滚动的垂直距离是否超过了阈值，如果超过了阈值，则隐藏div。
相关·内容
在页面顶部，我想在导航栏上方列出电话号码和电子邮件。但是，当您开始向下滚动时，我希望电话号码和电子邮件消失，只显示导航栏。我试过使用固定顶部，然而，它总是隐藏电话/电子邮件。我如何才能在所有设备尺寸上实现这一点？ 我使用的是Bootstrap 4。<body class="d-flex flex-column h-100
浏览 17提问于2020-07-03得票数 0
2回答
我试图添加一个次要导航条，它是固定在创建的网页的右上角，只有当我们向下滚动页面时才会出现。此导航包含在“粘滞”类中。代码和语法似乎是正确的。但是，当网页处于初始阶段时，这个栏并没有隐藏自己。我只希望它出现时，网页是向下滚动。请帮我把这个修好。
浏览 2提问于2021-07-02得票数 0
回答已采纳
我是Swift的新手，我正在努力寻找一个解决方案:在我的UITableViewController中，我想让我添加到故事板中的工具栏始终固定或“粘滞”在视图的底部。目前，在将工具栏拖动到UITableViewController中后，它会添加该工具栏；但是，它会将该工具栏放在表的最后一行。
我希望这个工具栏始终位于导航选项卡栏<
浏览 0提问于2018-03-09得票数 1
1回答
我已经设置了这个页面，当您滚动经过导航栏的顶部时，它会变得粘滞，并停留在页面的顶部。这是我目前工作的。我应该如何更改jQuery，使其保持在原来的位置？"top": "0px",
浏览 2提问于2015-09-06得票数 0
5回答
位置:粘性和位置:固定？
、、、
文档很难理解，因为我是CSS的新手。那么，谁能解释一下position:sticky和position:fixed之间的实际区别？我也希望能举个例子。
我已经阅读了和其他一些文章，但我仍然不理解。
浏览 1提问于2013-10-22得票数 74
我想知道当您向下滚动页面时，如何才能使搜索栏(而不是顶部的导航栏)与页面内容不重叠。请注意，我有一个导航栏和一个搜索栏，我在中指的是在本期中提到的搜索栏(粘滞条) I.e。期望的结果:当页面向下滚动<em
浏览 2提问于2020-06-27得票数 0
3回答
我正在尝试实现这样的应用程序
在向下滚动时，我需要单独隐藏搜索栏，并将行和选项卡钉在设备顶部。就像
当我们向下滚动时，需要显示所有的三行。使用带有底部属性选项卡的SliverAppBar在滚动时会被放置和固定，但在其上方的一行应该固定在选项卡上方的顶部。由于底部属
浏览 6提问于2020-06-12得票数 2
回答已采纳
我对CSS的了解似乎刚刚好，足以在这里遇到麻烦。在我尝试滚动之前，一切都很正常。导航栏下拉菜单在没有使用position: fixed进行滚动的页面上表现得非常出色。当我滚动时，我意识到它卡在了固定的位置。当我将其更改为position: sticky，以便它在页面滚动时与导航栏一起滚动<em
浏览 2提问于2021-09-12得票数 0
1回答
我有一个棘手的小问题，我不能把我的头绕过去。场景：--我有两个引导有序的列:在大屏幕上，它们位于相邻的两个屏幕上，在较小的屏幕上，右边的一个位于左列的上方。<div class="row"></div>
<div class="
浏览 3提问于2014-07-08得票数 4
我怎样才能像Udemy页面课程那样用侧边栏做些什么呢？当用户向下滚动页面时，侧边栏就会固定在页面顶部，当到达某个地方(在触摸页脚之前)，侧边栏就不再粘稠了。在向下滚动时，我已经可以将粘滞的边栏放到顶部，但是当滚动到页脚时，我不知道如何停止粘
浏览 0提问于2018-09-19得票数 1
回答已采纳
1回答
我有一个粘性的footbar，用position: absolute和bottom:0固定在底部在此之后滚动到顶部时，它会回到底部。所以我想是地址栏导致了问题，
浏览 0提问于2017-12-24得票数 0
在我的网站www.aerycs.com上，我正在尝试让TrustBadge显示在响应视图(智能手机)中固定导航栏的上方。
我的导航栏固定在顶部，当页面向下滚动时，导航栏一直停留在那里。信任证章位于此元素的后面，但不会显示。如果我只是将位置设置为相对，整个区域
浏览 12提问于2019-07-18得票数 1
回答已采纳
我使用下面的代码来创建一个粘滞的导航菜单。当我向下滚动页面时，我想淡出这个导航(一旦它变得“固定”)。mega-fixed");
$(window).scroll(fixDiv);我尝试在上面的css中使用一个不透明元素，并将"transition: all 1“效果应用于添加的”当我向下滚动页面时
浏览 2提问于2013-07-02得票数 0
1回答
然而，在移动浏览器上，这会导致糟糕的UI，因为随着地址栏的隐藏/显示，视口高度会增加/减少(如在Chrome上)。有没有办法防止在滚动中自动隐藏地址栏？Freelancer网站有一个解决这个问题的实现。有人能解释一下这是怎么做到的吗？
浏览 8提问于2016-06-26得票数 3
回答已采纳
我有一个大的导航条，我想隐藏每次滚动条不是在顶部的位置。
因此，基本上，我有一个想法，有两个导航栏，互相重叠。高度较大的一个位于顶部(具有较大的z索引)，而导航相同但宽度较小的较小的则在其下方。我想要的东西，当用户滚动他的鼠标轮向下/拖动滚动条，使用键盘向下
浏览 0提问于2014-05-06得票数 0
回答已采纳
在主页上，我有一个在页面上不可见的菜单栏(即可见区域上方的屏幕外)，并在滚动位置超过50 to时从顶部向下移动(动画)，显示为常规(固定)导航菜单栏。这是用jQuery完成的。当页面完全滚动到顶部时，菜单栏再次向上移动/消失。
但是，出于可访问性的原因，当<
浏览 2提问于2017-10-02得票数 0
回答已采纳
我要做的是创建两个导航栏。第一个(顶部导航栏)只是一个品牌(徽标)。第二个(底部导航栏)是导航菜单。当用户向下滚动时，我希望顶部导航栏滚动离开屏幕，但我希望第二个(底部)导航栏固定在屏幕顶部。我已经将每个导航栏设置为单独的组件。 这种行为<
浏览 23提问于2020-03-28得票数 2
回答已采纳
2回答
我在我的页面上有一个登录表单，在用户和pass字段中有2个引导图标。问题是，当它们滚动经过时，它们会显示在我粘滞的导航栏上方。我曾尝试将z索引设置为比导航栏(如navbar=1 icons=0)更小的值，但不起作用。
为什么会发生这种情况，我如何防止这种行为？
浏览 1提问于2013-09-28得票数 2
我附加了一个事件处理程序，并根据滚动位置和切换一个显示类来隐藏ro显示所需的元素。 </div> </div> );
}
浏览 2提问于2020-05-07得票数 1
4回答
我对css中的定位非常陌生(例如相对的、固定的、绝对的)。我想做的是在我的屏幕顶部创建一个固定的导航栏，当用户向下滚动内容时，它会一直留在那里。问题是，我有一个隐藏的联系人面板，当用户单击导航菜单中的“联系人”时，它会向下滑动。我希望<em
浏览 2提问于2012-09-18得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
