Erlo

根据浏览器的滑动条 固定导航栏

时间:2019-01-11 23:02   阅读:97次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

固定导航栏

前言:很多网站都有这种网页的效果:滑动浏览器右侧的滚动条,导航栏会一直处于最上方

下面我就来简单实现以下这个功能


 

 一.首先我们来写一下html的结构:

1 <div class="top" id="top"></div>
2 <div class="nav" id="nav"></div>
3 <div class="main" id="main"></div>

  二.我们来简单写一下样式

   这个结构可以说是简单明了,由三部分组成  顶部  导航栏 还有主体部分

  但是我们并不打算继续写下去  我们简单的用样式表达一下  用颜色划分区域 这个是练习的好方法

   

 1 <style>
 2         .top {
 3             height: 200px;
 4             width: 100%;
 5             background-color: #f00;
 6         }
 7         .nav {
 8             height: 150px;
 9             background-color: skyblue;
10             width: 100%;
11         }
12         .main {
13             margin-top: 100px;
14             height: 1000px;
15             width: 100%;
16             background-color: black;
17         }
18     </style>

    三.接着我们来写一下js的代码

    

 1 window.onscroll = function () {
 2         if (getScroll().top >= my$("top").offsetHeight){
         //利用定位使其固定 脱标
3 my$("nav").style.position = "fixed"; 4 my$("nav").style.top = 0;
         //设置main 的 margintop 防止由于nav的脱标 main 整体向上移动 而造成下拉过程并不流畅的效果
5 my$("main").style.marginTop = (my$("nav").offsetHeight + 100) + "px"; 6 } 7 else {
          //取消设置的东西 然后恢复成原来的样子
8 my$("nav").style.position = ""; 9 my$("main").style.marginTop = "100px"; 10 } 11 }

 

下一篇:HTML基础总结

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-05-24 14:41:32Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部