页面滑到一定为位置，导航弹出，固定

最新推荐文章于 2021-10-19 10:58:38 发布
最新推荐文章于 2021-10-19 10:58:38 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wandoumm/article/details/80166167
博客提供了headhesive.js的演示链接http://www.jq22.com/demo/headhesive.js-master/ ，可用于前端开发相关的参考与测试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

http://www.jq22.com/demo/headhesive.js-master/
仿京东固定导航栏案例【滑动到某位置弹出另外一个导航栏】
KXJ
04-27 528
需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出 分析： ①：用到页面滚动事件 ②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport.
html滑动指定位置,HTML+jQuery 点击滑动到页面的指定位置
weixin_39633807的博客
06-09 1315
实现效果效果1：点击标签跳转到页面的指定位置效果2：当页面滑动到相应位置时导航栏样式改变效果如下：方法：使用scrollTop进行定位和跳转。首先，在HTML中给跳转到的结点设置idHistoryCrafts然后在js中设置点击事件，点击导航栏的按钮使窗口跳转指定位置。scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。在这里使用scrollTop设置html和body元素相对滚动条...
JS滚动到指定位置导航栏固定顶部
10-19
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享
当某元素滚动距离超过显示屏的一半时弹出提示框（各滚动距离函数）
weixin_44558497的博客
05-24 513
js代码片段：
定位弹窗实现滚动
qq_30856967的博客
08-20 337
< scroll-view scroll-y=“true” style=“overflow: auto;flex:1;margin-top: 10rpx;”> < /scroll-view>
vue中滚动到一定位置固定(吸顶效果)
Rziziの博客
10-19 3461
vue中滚动到一定位置固定(吸顶效果) **效果：**开始的导航高度100px,滚动距离>=100px后高度变为90px 且固定在顶部 <template> <div class="nav-sub "> <active-btn :class="fixed == true ? 'fixed' : ''"> 可添加文字</active-btn > </div> </
滚动到一定高度后，固定显示
02-13
前端开发中，经常用到滚动到一定高度后，固定显示需求
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
10-17
MUI侧滑导航菜单可以实现当用户在微信小程序页面上从右侧向左侧滑动时，右侧内容区滑动而左侧菜单保持不动，这种效果被称作“Popup弹出式”。实现这种效果，需要开发者对微信小程序的页面布局、事件处理有深入理解。...
弹出窗口_背景固定_iframe
04-14
1. 创建一个CSS样式，使得弹出窗口在页面中央显示，并设置背景为透明或半透明，以达到“固定背景”的效果。这样，当弹出窗口打开时，用户可以看到被遮挡的主页面，但不能与之交互。 2. 在HTML中使用`<iframe>`元素，...
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
10-24
主要介绍了JavaScript弹出新窗口并控制窗口移动到指定位置的方法,涉及javascript针对弹出窗口的操作技巧,非常具有实用价值,需要的朋友可以参考下
当页面滑动到一定位置，元素固定位置、页面进度条以及翻屏效果
sj1255897381的博客
06-26 1976
页面进度条和元素固定位置 1、页面进度条：当滚动条在页面中滚动时，页面上部会出现等比例的颜色填充效果。 <div class="progress"> </div> //制作进度条 <div style="height: 500px;"></div> <div class="demo"></div>//需要固定位置的页面元素 <div class="item"></div> *{ margin
浏览器滚动到一段距离，绝对定位的导航出现
沫沫酱
01-22 3690
具体效果是，浏览器滚动到一定距离的时候，fixed绝对定位的导航会显示，当滚动到小于这个距离的时候，导航会隐藏。 js部分：     function getTop() {         var mytop = $(document).scrollTop();         if (mytop > 400) {             $(".fixed_bann
前端页面滚动时固定导航栏
HWJBJ的博客
08-06 2948
vue + vant 1、如果导航栏就在顶部时，只需样式固定在顶部就好 2、但是想要固定的部分，不在导航栏，需要页面滚动到导航栏时固定，划回去的时候又不要固定时，可参考以下代码 Video_2021-08-06_102128 html部分 <!-- 上面有一些其他显示的东西--> <div id="yj_bot"> <!-- 需固定区--> &
页面滑到底部弹出提示框
weixin_30832405的博客
12-05 410
原理:页面滚动高度+可视区域高度=页面内容高度时 显示提示框 <script> var bodyHeight=document.documentElement.clientHeight||document.body.clientHeight;//页面屏幕高度 var pageHeight=documen...
滚动页面，实现导航栏固定在顶部（吸顶效果）
热门推荐
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
【Axure】如何让导航栏固定到浏览器底部或顶部？（已解决，图文教你）
【敦厚的曹操】的专栏
03-26 1万+
一、把导航图片，点右键，转换为动态面板。 二、右键转换后的“动态面板”，按下图打对勾。 三、在固定到浏览器后，会有一个弹窗，按你的要求设置一下。
CSS／JS 实现滑动页面，到一定位置，position 定位设置为fixed,否则用absolute;
皮卡丘の开发之路
08-25 2万+
当我滚动页面的时候，在可视区域的时候，我想让顶部的导航区域随着我页面的滚动一起滚动，但是当页面移动到一定位置的时候，如果还是使用postion:alsolute；来进行定位的话，顶部导航就回随着我页面的移动而移动。不会将导航下面的内容移动后，就自动以position:fixed的样子来显示顶部导航区域。下面我放一张京东的导航图的效果，更直观的显示，我想要实现的大致操作。注意顶部京东搜索的那个框：想要
vue 页面滚动一定距离，头部下拉fixed定位，且显示头部的搜索栏
小白菜的博客
05-25 3720
这里以boss直聘展示的效果为例，页面正常打开显示导航栏及头部，页面向下滚动时，出现固定定位头部，且只有搜索部分。 页面打开不下拉时： 页面下滑一定距离时展示效果： 通过监听页面滚动，然后设置样式来控制哪些显示哪些隐藏： // <template> <div> <div :class="{'home-header': true, 'home-header-fixed': show }"> <el-row class="ho
搜索内容滑到最底部，导航条的位置怎么设置
最新发布
03-26
<think>好的，用户现在问的是“搜索内容滑到最底部，导航条的位置怎么设置”。首先，我需要明确用户的具体需求。他们可能是在开发一个网页或者应用，当用户滚动到内容底部时，希望导航条的位置能够正确显示或者调整。可能的情况是导航条原本固定在页面顶部或底部，但当内容滚动到底部时，导航条的位置出现了问题，比如被内容覆盖或者位置不正确。 接下来，我需要考虑用户可能的场景。例如，在网页开发中，导航条通常使用CSS进行定位，可能用的是固定定位（fixed）或者绝对定位（absolute）。当内容很长，用户滚动到底部时，如果导航条是固定在底部，可能会遮挡部分内容，或者需要动态调整位置。用户可能希望导航条在内容未到底部时固定在底部，而到底部时跟随内容，或者始终可见但不遮挡内容。 然后，我需要思考不同的实现方法。常见的方法包括使用CSS的固定定位，结合JavaScript监听滚动事件，判断是否滚动到了底部，然后动态改变导航条的定位方式。例如，当内容未到底部时，导航条使用position: fixed; bottom: 0;，当滚动到底部时，改为position: absolute;相对于父容器定位，这样导航条会停留在内容底部而不是视窗底部。 还要考虑可能的兼容性和响应式设计的问题。不同浏览器对滚动事件的监听可能有差异，需要确保代码的兼容性。此外，移动端和桌面端的滚动行为可能不同，需要测试响应式布局下的表现。 用户可能遇到的问题包括导航条遮挡内容底部的内容，或者在滚动到底部时导航条突然跳动位置。因此，解决方案需要平滑过渡，可能使用CSS过渡动画或者动态计算滚动位置来调整导航条的位置。 另外，需要提供示例代码，方便用户直接应用。例如，使用JavaScript检测滚动位置，当距离底部小于一定阈值时，改变导航条的CSS类，从而调整其定位方式。同时，提醒用户注意父容器的定位设置，避免因为父元素的position属性导致布局错乱。 总结下来，回答需要分步骤解释不同的实现方法，包括纯CSS方案和结合JavaScript的动态方案，说明各自的优缺点，并提供代码示例和注意事项，确保用户能够根据具体情况选择合适的解决方案。</think>在网页或应用开发中，当内容滑动到最底部时，导航条的定位方式需根据需求调整。以下是常见的实现方案及代码示例： --- ### 一、核心逻辑：判断内容是否滑到底部 通过 **滚动事件监听** 和 **位置计算** 实现： ```javascript window.addEventListener('scroll', function() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight; // 判断是否滑到底部（误差范围可调） if (documentHeight - (scrollTop + windowHeight) < 10) { // 触底时的操作 navBar.style.position = 'absolute'; navBar.style.bottom = '0'; } else { // 未触底时的默认状态 navBar.style.position = 'fixed'; navBar.style.bottom = '0'; } }); ``` --- ### 二、常见场景与解决方案 #### 1. **导航条默认固定在底部，触底时跟随内容** - **CSS 初始设置**： ```css .nav-bar { position: fixed; /* 默认固定在视窗底部 */ bottom: 0; width: 100%; transition: all 0.3s; /* 平滑过渡效果 */ } ``` - **触底时改为绝对定位**（避免遮挡内容尾部）： ```javascript // 在滚动监听逻辑中切换定位方式 ``` #### 2. **触底时隐藏/显示导航条** - **CSS 隐藏动画**： ```css .nav-bar.hide { transform: translateY(100%); } ``` - **通过 JS 切换类名**： ```javascript if (isBottom) { navBar.classList.add('hide'); } else { navBar.classList.remove('hide'); } ``` --- ### 三、响应式布局注意事项 1. **移动端兼容**： - 使用 `position: sticky`（iOS 需加 `-webkit-sticky`） - 处理软键盘弹出时的视窗高度变化 2. **父容器定位**： - 若导航条在滚动容器内，需设置父级为 `position: relative` 3. **防抖优化**： ```javascript let timer; window.addEventListener('scroll', function() { clearTimeout(timer); timer = setTimeout(checkScrollBottom, 100); // 减少频繁计算 }); ``` --- ### 四、纯 CSS 方案（有限场景） 通过 **Flex 反向布局** 实现内容触底时自然顶起导航： ```css .container { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; /* 内容区域自动填充剩余空间 */ } .nav-bar { flex-shrink: 0; /* 导航条不收缩 */ } ``` --- ### 五、示例效果对比 | 方案 | 优点 | 缺点 | |------|------|------| | JS 动态定位 | 精确控制触底逻辑 | 需处理滚动性能 | | CSS Flex 布局 | 无性能开销 | 仅适用于内容高度不足视窗时 | | Sticky 定位 | 代码简洁 | 浏览器兼容性要求高 | --- **建议优先选择 JS + CSS 过渡动画的组合方案**，既能精准控制触底逻辑，又能保持交互流畅性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值