源生实现滚动页面显示悬浮导航

很多网页中都有当我们滚动页面到一定的高度时就会显示悬浮导航，这个效果用jquery实现很简单，只要用 slideDown( )实现，今天主要分享源生JS实现这个效果；
HTML代码：

<header><h1>header</h1></header>
<div id="nav"><ul><li><a href="#">首页</a></li><li><a href="#">秒杀</a></li><li><a href="#">女装馆</a></li><li><a href="#">内衣馆</a></li><li><a href="#">美妆馆</a></li><li><a href="#">品牌特卖</a></li><li><a href="#">团购频道</a></li><li><a href="#">每周上新</a></li></ul>
</div>
<div id="cloths"><h1>cloths</h1></div>
<div id="shoes"><h1>shoes</h1></div>
<div id="toys"><h1>toys</h1></div>

CSS代码：

*{ margin: 0; padding: 0; }
header{ height: 200px; background: #f2f2f2; font-weight: bold; text-align: center; line-height: 200px; }#nav{ width: 100%; height: 50px; background: #333; }
#nav ul{ width: 900px; margin: 0 auto; }
#nav li{ list-style: none;  float: left; }
#nav li a{ font-size: 16px; height: 50px; color: #fff; padding: 0 30px; line-height: 50px; text-decoration: none; display: inline-block; }
#nav li a:hover{ background: #666; }#cloths{ height: 600px; background: #bbb; font-weight: bold; text-align: center; line-height: 400px; }
#shoes{ height: 600px; background: #aaa; font-weight: bold; text-align: center; line-height: 400px; }
#toys{ height: 600px; background: #999; font-weight: bold; text-align: center; line-height: 400px; }.fixed{ position: fixed; top: 0; left: 0; animation-name: show; animation-duration: 0.5s; }@keyframes show{from{ top: -50px; }to{ top: 0; }
}

JS代码：

window.onload = function(){var nav = document.getElementById("nav");var shoes = document.getElementById("shoes");scrollMenu( nav,shoes );}function scrollMenu( obj,target ){window.onscroll = function(){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var top = target.offsetTop;//当滚动高度大于目标元素的位置，导航条显示if( scrollTop>=top ){obj.className = "fixed";}else{obj.className = "";}}
}

源生实现滚动页面显示悬浮导航相关推荐

滚动页面显示悬浮导航
代码: <html><head><title>滚动页面显示悬浮导航</title><style>*{margin:0;padding:0;} ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...
利用JS实现悬浮导航的隐藏和显示
利用JS实现悬浮导航的隐藏和显示 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工 ...
html 滚动隐藏导航,[jQuery]滚动隐藏或显示顶部导航菜单
现在大部分导航菜单在顶部的网站都会采用固定的形式,不管页面怎么滚动,菜单始终会固定在顶部. 而下面这个方法比较灵活,当你向下滚动页面时,导航菜单是不固定的,当你向上滚动时导航菜单就会显示出来了.这个 ...
vue实现网页中滚动鼠标时改变导航栏背景颜色
1.HTML <div id="topBannerNav" :style="topBannerNavBg">导航栏部分 </div> 2 ...
html侧边导航栏跟随页面滚动,页面滚动时，右侧导航栏跟着对应滚动
页面滚动时,右侧导航栏跟着对应滚动方法一: 导航栏对应跳转 *{ margin:0px; padding:0px; text-align:center; color:#fff; font-size: ...
html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...
滚动页面一定距离后固定导航条
需求:滚动页面到一定距离后,页面中间的导航条固定到页面的某个位置不动,滚回去时会复原. document.addEventListener('scroll', function (event) { v ...
html iframe显示不全,滚动的iframe解决，但在iframe页面显示不全
我试图滚动iOS上的iframe,我成功了,它的滚动的好,参考:滚动的iframe解决,但在iframe页面显示不全但是,所有的解决方案都有一个问题:iframe页面没有完全显示... 我测试了我的 ...

源生实现滚动页面显示悬浮导航

源生实现滚动页面显示悬浮导航相关推荐

最新文章

热门文章