封装getScroll函数

1. 获取页面向上或者向左卷曲出去的距离的值
2. 浏览器的滚动事件
  function getScroll() {

    return {

      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,

      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

    };

  }

    //浏览器的滚动事件

    window.onscroll = function () {

      console.log(getScroll().top);

    };

案例：固定导航栏

获取scrollTop值后判断高度大于导航栏的高，就设置样式固定住，同时，主页部分的marginTop值，为防止浮动/脱标造成的影响，这个值设置为导航栏的高

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      margin: 0;

      padding: 0

    }

    img {

      vertical-align: top;

    }

    .main {

      margin: 0 auto;

      width: 1000px;

      margin-top: 10px;

    }

    .fixed {

      position: fixed;

      top: 0;

      left: 0;

    }

  </style>

</head>

<body>

  <div class="top" id="topPart">

    <img src="data:images/top.png" alt="" />

  </div>

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

    <img src="data:images/nav.png" alt="" />

  </div>

  <div class="main" id="mainPart">

    <img src="data:images/main.png" alt="" />

  </div>

  <script src="common.js"></script>

  <script>

    //获取页面向上或者向左卷曲出去的距离的值

    function getScroll() {

      return {

        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,

        top: window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

      };

    }

    //滑动事件

    window.onscroll = function () {

      if (getScroll().top >= my$("topPart").offsetHeight) {

        //设置第二个div的类样式

        my$("navBar").className = "nav fixed";

        //设置第三个div的mainTop值

        my$("mainPart").style.marginTop = my$("navBar").offsetHeight + "px";

      } else {

        my$("navBar").className = "nav";

        my$("mainPart").style.marginTop = "10px";

      }

    };

  </script>

</body>

</html>

JS---封装getScroll函数 & 案例：固定导航栏的更多相关文章

  1. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  2. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  3. 固定导航栏（jquery）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. js实现用按钮控制网页滚动、以及固定导航栏效果

    实现效果如下: 页面内有三个按钮,分别控制页面向上.向下移动,以及暂停,并设置有导航栏,在滚动到某一位置时显示.且当用户主动控制鼠标滑轮时,滚动效果自动关闭.本页面只是演示如何实现,进行了简单的布局, ...

  5. 用原生JS实现爱奇艺首页导航栏

    以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> < ...

  6. JQuery实现仿腾讯的固定导航栏

    1.描述 窗口滚动一定高度之后才让导航栏固定 2.要点 浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); ...

  7. 固定导航栏demo

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  8. 原生JS封装_new函数，实现new关键字的功能

    1.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生 ...

  9. JS封装继承函数

    function extend(child,parent){ var F=function(){} F.prototype=parent.prototype; child.prototype=new ...

随机推荐

  1. Requests小技巧

  2. Spring IOC初始化深度解析

    1.前言 本文是基于JAVA配置方法对Spring IOC进行分析,掌握Spring IOC初始化流程对于我们更好的使用Spring.学习Spring还是很有帮助的,本文所使用的的Spring版本为5 ...

  3. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（2）- Boot配置(ISP_Pin, OTP)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Boot配置. 在上一篇文章 Boot简介 里痞子衡为大家介绍了Boot基本原理以及i.MXRTx ...

  4. MySQL 格式化时间 成字符串

    创建个表: CREATE TABLE `x02基本信息` ( `ID` varchar(32) NOT NULL COMMENT '系统内记录的唯一标识,供系统内部使用.', `名称` varchar ...

  5. 2753:走迷宫（dfs+初剪）//可以说是很水了。。。

    总时间限制:  1000ms 内存限制:  65536kB 描述 一个迷宫由R行C列格子组成,有的格子里有障碍物,不能走:有的格子是空地,可以走.给定一个迷宫,求从左上角走到右下角最少需要走多少步(数 ...

  6. sql语句查询结果合并union all用法_数据库技巧

    --合并重复行 select * from A union select * from B --不合并重复行 select * from A union all select * from B 按某个 ...

  7. Grok Debugger安装配置

    前言:由于使用ELK对日志进行集中管理,grok表达式无法验证是否正确,所以使用Grok Debugger进行调试,但是由于国外网站上不去(http://grokdebug.herokuapp.com ...

  8. PHP 获取服务器详细信息的原生方法

    获取系统类型及版本号:    php_uname()     (例:Windows NT PCA15130 6.1 build 7601 (Windows 7 Ultimate Edition Ser ...

  9. mysql那些事(4)建库建表编码的选择

    mysql建数据库或者建表的时候会遇到选择编码的问题,以前我们都是习惯性的选择utf8,但是在mysql在5.5.3版本后加了utf8mb4的编码,utf8mb4可以存4个字节Unicode,mb4就 ...

  10. js5——页面转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...