js实现导航固定定位

 <!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>内容滚动事件</title>

     <style>

     *{

         margin: 0;

         padding: 0;

         list-style: none;

     }

     html,body{

         width: 100%;

     }

     .header{

         height: 130px;

         background: red;

         font: 700 28px/130px serif;

         color: aqua;

         text-align: center;

     }

     .nav{

         height: 60px;

         width: 100%;

         background: green;

         font: 700 24px/60px serif;

         color: rgb(240, 240, 14);

         text-align: center;

     }

     ul{

         display: inline-block;

     }

     li{

         float: left;

         margin-left: 60px;

     }

     .content1,

     .content2,

     .content3 {

         height: 500px;

         background: #DFFCB5;

         font: 400 60px/800px serif;

         color: #52524E;

         text-align: center;

     }

     .content2 {

         background: #FFE1B6;

     }

     .content3 {

         background: #CDE3EB;

     }

     .fixed {

         position: fixed;

         top: 0;

         left: 0;

     }

     </style>

 </head>

 <body>

     <div class="header" id="header">

         顶部广告栏

     </div>

     <div class="nav" id="nav">

      <ul>

         <li>主页</li>

         <li>商城</li>

         <li>产品展示</li>

         <li>服务</li>

         <li>关于我们</li>

      </ul>

     </div>

     <div class="content1" id="con">

             内容1

         </div>

         <div class="content2">

             内容2

         </div>

         <div class="content3">

             内容3

         </div>

 </body>

 </html>

 <script>

  var header = document.getElementById('header');

     var nav = document.getElementById('nav');

     var content = document.getElementById('con');

     // 封装一个scrollTop兼容性函数

     function getScrollTop() {

         return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

     }

     // 给页面注册滚动事件

     window.onscroll = function() {

         // 判断广告栏header 与 滚动的scrollTop的值

         // 当scrollTop > header高度的时候 让导航栏 nav 固定定位

         var scrollTop = getScrollTop();

         if (scrollTop >= header.offsetHeight) {

             // 样式中有的类名这里一定不要忘了加上去，否则就会被替换掉

             nav.className = "nav fixed";

             // 一旦标题栏设置了固定定位之后，就脱离标准流了，下面的内容就会顶上来，

             // 所以要手动给下面的内容添加一个margin-top，将导航栏的位置留下来

             content.style.marginTop = nav.offsetHeight + "px";

         } else {

             // 当scrollTop < header高度的时候 让导航栏 nav 恢复到原来的位置

             // nav 取消固定定位，恢复到原来的位置，所以下面内容的margin-top也要去掉

             nav.className = "nav"; // 去掉固定定位的样式，保留之前的样式

             content.style.marginTop = 0;

         }

     };

 </script>

js实现导航固定定位的更多相关文章

  1. pc端监听屏幕实现导航固定定位

    要点:占位符 js,监听屏幕滚动事件,当滚动条距离浏览器顶部的距离 大于 要固定定位开始以下元素的距离,则给要固定元素添加fixed样式. 初始化方法时,要给占位符添加样式 function sort ...

  2. js 设置导航固定

    <div id="nav"> .... </div> function Add_Data() { var top = $("#header-nav ...

  3. 滚动条大于120px时，判断pc端的情况下，导航条固定定位

      //滚动条大于120px时,判断pc端的情况下,导航条固定定位 $(window).scroll(function(){ var viewWidth=$(document).width() var ...

  4. Bootstrap 固定定位（Affix）

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

  5. 固定定位 z-index iconfont的使用 043

    固定定位  现象 脱标 提升层级  将盒子固定住 参考点 浏览器的左上角 : <!DOCTYPE html> <html lang="en"> <he ...

  6. jquery的固定定位效果

    今天做了个固定定位的效果.比如对导航需要进行固定定位效果: 当没有滚动到导航下面,导航正常显示. 当滚动到导航下面,导航就固定到顶部. 这个效果使用了jquery的方法实现,具体思路为: 1)首先获取 ...

  7. jQuery实现页面导航内容定位效果，并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  8. 实现 DIV 固定定位在网页主体部分最右侧

    position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...

  9. jquery 导航固定的一个实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 初步体验libsvm用法1(官方自带工具)

    在机器学习和模式识别领域,svm理论使用得很广泛,其理论基础是统计学习,但是如果我们的研究方向不是svm理论,我们只是利用已有的svm工具来对我们的任务进行分类和回归,那么libsvm是一个不错的选择 ...

  2. Maven Hibernate

    1.使用maven管理Hibernate实现自动装配jar包 2.需要在配置文件pom.xml中引入 如:引入hibaernate5.2.11.Final版本的jar包,需要做如下配置: <!- ...

  3. POJ 3228 Gold Transportation

    Gold Transportation Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on PKU. Ori ...

  4. 计算机-禁止USB服务

    接到一个任务,禁止集团内所有电脑的USB接口进行文件拷贝,但不能妨碍打印机.鼠标键盘.扫描仪.加密狗等等一切需要USB接口工作的外部设备. 纠结了,这不摆明了让我蛋疼吗? 不过,疼归疼,办法总是要想滴 ...

  5. BA-siemens-点位类型表

    X(超级点)  输入 0-10v 4-20ma(不可用) Ni 1000 Pt 1000 10k & 100k 热敏电阻 数字输入 脉冲计数输入 输出 0-10v 4-20ma(不可用) 数字 ...

  6. 定时器SDK

    定时器是一切SDK的根本,欲写SDK必先确定定时器,定时器效率的高低决定着SDK函数的效率,下面是我个人写的Linux C++服务器端进程SDK中的定时器,部分参照了ACE和RocketMQ定时器的思 ...

  7. 日志log配置理解

    实际生产中,每天都有大量的日志生成,单个文件(FileAppender)已经不能满足要求,RollingFileAppender继承了FileAppender,并提供了更多的功能: 每天生成一个日志文 ...

  8. HDU 1215

    由算术基本定理, 直接使用公式就好 #include <iostream> #include <cstdio> #include <algorithm> #incl ...

  9. 石子合并（区间dp）

    石子合并(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述     有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程仅仅能每次将相邻 ...

  10. 淘宝数据库OceanBase SQL编译器部分 源代码阅读--生成逻辑计划

    淘宝数据库OceanBase SQL编译器部分 源代码阅读--生成逻辑计划 SQL编译解析三部曲分为:构建语法树.生成逻辑计划.指定物理运行计划. 第一步骤,在我的上一篇博客淘宝数据库OceanBas ...