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

固定导航栏

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

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

---

 

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

<div class="top" id="top"></div>
<div class="nav" id="nav"></div>
<div class="main" id="main"></div>

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

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

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

　　　

<style>
        .top {
            height: 200px;
            width: 100%;
            background-color: #f00;
        }
        .nav {
            height: 150px;
            background-color: skyblue;
            width: 100%;
        }
        .main {
            margin-top: 100px;
            height: 1000px;
            width: 100%;
            background-color: black;
        }
    </style>

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

　　　　

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