js来控制导航栏在滚动条拉到一定位置时显示

最新推荐文章于 2024-07-20 13:48:02 发布
最新推荐文章于 2024-07-20 13:48:02 发布
阅读量2k 收藏 7
点赞数 1
分类专栏： web大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingtian678/article/details/85091842
版权

<html>
<head>
    <title>test</title>
</head>
<body>
    <div style="position: fixed; height: 200px; background: red; width: 100%; display: none" id="topbar"></div>
    <div style="height: 3000px;">content</div>
</body>
<script type="text/javascript">
    window.onscroll = function () {
        var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var node = document.getElementById('topbar');
        if (top > 500) {//500就是滚动条滚动到的位置，大于500(500指500px)才显示
            node.style.display = 'block';
        } else {
            node.style.display = 'none';
        }
    }
</script>
</html>

jingtian678
关注
专栏目录
JS移动指定距离固定与显示导航栏
m0_48296376的博客
01-13 425
文章目录一、基础页面css:body:js:效果图 一、基础页面 css: .box{ width: 100vw; height: 200vh; background-color: #000000; } .c{ width: 100vw; height: 200px; background-color: white; } .h{ width: 200px; height: 200px; backgroun
【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示
weixin_30735391的博客
04-10 87
<html> <head> <title>test</title> </head> <body> <div style="position: fixed; height: 200px; background: red; width: 100%; display: none" id="topb...
JS 滚动条控制
最新发布
weixin_45456477的博客
07-20 896
缺点：需要添加不必要的属性，且不能控制距离顶部的偏移量，如果顶部有遮盖层，会被遮盖。当产生滚动条的元素不是windows元素时,window.scrollTo就会失效。优点：可以控制元素滑到顶部后的偏移量，且可以添加smooth值让滚动变得丝滑。此时我们需要先获取产生滚动条的父元素，将window替换为这个父元素。缺点：如果页面情况更加复杂，此方案还是会产生不可预料的问题。缺点：需要知道产生滚动条的元素，否则无法生效。优点：代码简单，可靠性高。缺点：不能指定偏移量。
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
qq_41241767的博客
06-03 3598
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置 js部分 //标题对象 var title = document.getElementById("title"); //菜单对象 var menu = document.getElementById("menu"); //正文对象 var content =...
为页面增加滚动事件侦听，当页面滚动高度大于200，在页面右下方出现 返回顶部 按钮...
a496798779的博客
04-25 253
1 <body> 2 <div style="height: 2000px;"></div> 3 <a href="#" id="backTop" style="display: none;position: fixed;bottom: 0;right: 0;">回到顶部</a> 4 <script&gt...
浏览器滚动到一段距离，绝对定位的导航出现
沫沫酱
01-22 3650
具体效果是，浏览器滚动到一定距离的时候，fixed绝对定位的导航会显示，当滚动到小于这个距离的时候，导航会隐藏。 js部分：     function getTop() {         var mytop = $(document).scrollTop();         if (mytop > 400) {             $(".fixed_bann
js监听滚动条改变导航元素位置和样式.rar
10-13
这个名为"js监听滚动条改变导航元素位置和样式.rar"的压缩包文件提供了一个实例，教你如何利用原生JavaScript来实现这一功能，特别适合初学者学习。以下是关于这个主题的详细讲解。 首先，我们需要理解滚动条事件。...
js实现滚动条滚动到某个位置便自动定位某个tr
01-19
要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下 js代码 [removed] function test(){ var $objTr = $(#location); //找到要定位的地方 tr $objTr.css...
h5下拉刷新上拉加载滚动条位置
12-21
这通常可以通过JavaScript来实现，监听页面的`beforeunload`或`unload`事件，存储滚动位置到本地存储（localStorage或sessionStorage）。 5. **实现技术**：在H5中，可以使用`window.pageYOffset`或`document....
基于jquery实现页面滚动时顶部导航显示隐藏
10-23
本文将介绍如何使用jQuery库来实现一个常见的动态效果：在页面滚动时顶部导航栏的显示与隐藏。 ### jQuery库 首先，需要介绍的是jQuery库。jQuery是一个快速、小型且功能丰富的JavaScript库。它使得HTML文档遍历和...
JS滚动条滚动到一定位置导航吸顶效果
qq_52006379的博客
08-30 499
【代码】JS滚动条滚动到一定位置导航吸顶效果。
jquery根据滚动像素显示隐藏顶部导航条
weixin_33720078的博客
03-26 139
本文使用jquery的scrollTop方法监视页面垂直滚动像素，并根据像素隐藏或者显示顶部的导航条。效果预览网址：http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍：语法$(selector).scrollTop(offset) 参数 offset 描述可选。规定相对滚动条顶部的偏移，以像素计。 定义和用法sc...
js滚动到指定位置导航栏固定顶部
afwzkklp73654的博客
11-03 193
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 25...
html 滚动隐藏导航,jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
weixin_35076634的博客
06-04 516
本文使用jquery的scrollTop方法监视页面垂直滚动像素，并根据像素隐藏或者显示顶部的导航条。效果预览网址：http://www.keleyi.com/keleyi/phtml/scrolloversee.htmscrollTop的介绍：语法$(selector).scrollTop(offset)参数offset描述可选。规定相对滚动条顶部的偏移，以像素计。定义和用法scrollTop(...
实现滚动到一定位置时，导航栏置顶的效果
xiao白的博客
04-16 4479
告别js用css实现滚动到一定位置时，导航栏置顶的效果。 <div class="nav">这里是导航栏所在的DIV容器。</div> css代码： .nav{ position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */ top:0; /* 距离窗口顶部距离 */ left:0; /* 距离窗口左边的距离 */ ...
屏幕滚动到页面某个位置，导航栏固定顶部功能。临近值闪烁问题解决办法
Mickeymouse
08-06 2329
在前端开发中，又是会遇到实现页面中有个导航栏，页面滚动到导航栏位置时，导航栏固定在顶部。滚动回去，导航栏再恢复到页面中。 我们需要获取 : 1. 导航栏在页面中距离窗口顶部的高度 top 2. 时刻检测窗口滚动的高度 scrollTop 当 scrollTop >= top时 说明页面已经滚动到导航的位置了，这时候使用给导航添加个class 然后设置导航position:fixed...
电梯导航案例
zhazhali_fenqi的博客
01-14 848
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
app中，实现下滑页面到一定高度，显示自定义导航栏
Boo_crob的博客
07-06 1631
在uniapp官方文档的框架中有关于页面的生命周期 找到onPageScroll 生命周期，他的一个参数是scrollTop，即页面垂直方向已滚动的距离(单位px) 逻辑处理过程是： 先定义一个布尔类型的变量，来控制自定义导航栏的显示与隐藏，当垂直方向页面滚动到一定高度（这里设滚动到100px时）后，即大于100px，则显示自定义导航栏，否则，隐藏导航栏。 //在data中定义布尔类型变量 data() { return { isShowNav: false, } }， //页面的生命周期 onPa
JS实现百度新闻导航栏效果
Yuri1025的博客
10-25 919
最近在学Web前端，用js简单实现了百度新闻导航栏的效果。当鼠标移动到某一选项上方时，会有一个红色背景块滑动到当前选项上。当点击某一选项后，固定的红色背景块位置会移动到当前选项，意为当前选项被选中。话不多说，代码如下 body部分 <div class="box"> <!--两个红色背景块--> <!--随鼠标移动的背景块--> <div id="move"></div>...
导航栏在顶端背景透明，滚动滚动条导航栏背景变成为白色
07-15
要实现导航栏在顶端背景透明，滚动滚动条时导航栏背景变为白色的效果，你可以使用JavaScript来监听滚动事件，并在滚动时改变导航栏的背景色。 下面是一个示例代码，你可以根据实际情况进行调整： ```html <!...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值