js滚动到指定位置导航栏固定顶部

window.onscroll=function(){var topScroll =document.documentElement.scrollTop;//滚动的距离,距离顶部的距离console.log(topScroll);var bignav  = document.getElementById("bignav");//获取到导航栏idif(topScroll > 200){  //当滚动距离大于250px时执行下面的东西console.log(1111);bignav.style.position = 'fixed';bignav.style.top = '0';bignav.style.zIndex = '9999';}else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状bignav.style.position = 'static';}}<div id="bignav" class="tabSelect">.tabSelect{display: flex;justify-content: space-around;height: 50px;width: 100%;background-color: white;line-height: 50px;font-size: 16px;padding: 0 10px;margin-bottom: 6px;border-bottom: 1px solid #efeff4;
}

js滚动到指定位置导航栏固定顶部相关推荐

页面滚动到指定位置导航栏固定顶部
做一个网页时经常会用到导航栏,导航栏对于一个网站来说,地位是举足轻重的,在用到导航栏时,我们经常会用到一个效果,就是当页面滑动到一定的位置时,导航栏需要固定在页面的顶部,这是怎么实现的呢? 下面的代码 ...
css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部
html-使用CSS滚动时,使导航栏保持顶部我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...
react顶部导航栏固定顶部
react顶部导航栏固定顶部顶部固定导航方式千千万,我只推荐三种,觉得有用可以点个赞,谢谢 (推荐第三种组件库) 1. 原生方法事件监听方法包括window.addEventListener(&q ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...
js滚动到指定位置显示或隐藏元素
在写小米商城购买页的时候有个导航栏需要在滚动页面到一定位置的时候固定显示,反之隐藏官网页面连接:https://www.mi.com/buy/detail?product_id=14206 1. ...
jq导航栏点击滚动到对应位置导航栏随页面滑动变化对应导航颜色
需要做个手机站,顶端有导航栏,点击导航栏页面滑到相应位置,并且滑动页面,导航栏也随之变化.由于不大会js,只能网上找了些代码,但是都不完全适用,就自己改造了一番,写的比较粗糙,但是对初学者来说,算是比 ...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索南宫仆射 ,想要下面的用户列表直接滚动到南宫仆射并改变CSS样式. 查 ...
【小程序】滚动到指定位置
点击按钮滚动到页面内的指定位置. wxml <view class="btn" catchtap="scrollToElement">去报名< ...

js滚动到指定位置导航栏固定顶部

js滚动到指定位置导航栏固定顶部相关推荐

最新文章

热门文章