<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

</head>

<style>

    /*菜单容器样式,设置水平垂直居中,方便点击*/

    .menu {

        position: fixed;

        width: 200px;

        height: 200px;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }

    /*菜单样式*/

    [href] {

        display: inline-block;

        width: 40px;

    }

    /*内容的样式*/

    [name] {

        display: block;

        width: 300px;

        height: 400px;

        border-top: 5px solid salmon;

    }

    /*菜单高亮的样式*/

    .active {

        font-size: 32px;

        background-color: chartreuse;

    }

</style>

<body>

    <!--内容容器-->

    <div class="content"></div>

    <!--菜单容器-->

    <div class="menu"></div>

</body>

</html>

<script>

    //初始化选择器,将获取到的element数组转化为数组对象

    function $(selector) {

        return Array.prototype.slice.call(document.querySelectorAll(selector)) //支持css3的选择器

    }

    //创建内容和菜单的DOM

    function createDom(attr) {

        var html = '';

        var temp = attr == 'href' ? '#' : '';

        for (var i = 1; i < 10; i++) {

            html += '<a ' + attr + '="' + (temp + i) + '">' + i + '</a>';

        }

        return html;

    }

    $('.content')[0].innerHTML = createDom('name')

    $('.menu')[0].innerHTML = createDom('href')

    //获取内容的偏移量(相对于浏览器顶部)

    var nameOffsets = $('[name]').map(function (v) {

        return v.offsetTop

    });

    //

    var timer;

    window.onscroll = function (e) {

        if(timer){

          clearTimeout(timer)

        }

        timer = setTimeout(function(){

          addLiScroll();

          timer = undefined;

        },200)

    }

    //滚动防抖

    function addLiScroll(){

      //获取当前页面相对于浏览器顶部的偏移量

      var pageOffset = window.pageYOffset;

      var abs = Math.abs; //获取绝对值函数

      //查找离当前浏览器顶部的偏移量最近的菜单锚点.

      var nearHash = nameOffsets.reduce(function (a, b) {

          return abs(a - pageOffset) > abs(b - pageOffset) ? b : a;

      })

      //获取菜单锚点

      var index = nameOffsets.indexOf(nearHash);

      //给菜单锚点添加 .active ,移除其他菜单元素的.active

      $('.active').forEach(function (v) {

          v.className = ''

      })

      $('[href]')[index].className = 'active'

    }

</script>

上面只是一个better-scroll基本的功能;

 git上是我仿饿了么实现购物的一些基本功能，也是下载即用　https://github.com/a653398363/moblieShopping

原生js 实现better-scroll效果,饿了么菜单内容联动，即粘即用的更多相关文章

  1. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  2. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  3. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  4. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  6. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  7. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  8. 原生JS编写的照片墙效果实例演示特效

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

  9. 原生js实现雪花飘落效果

    雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...

随机推荐

  1. Chrome浏览器控制台[DOM] Password field is not contained in a form:

    [DOM] Password field is not contained in a form: ( [DOM]密码字段不包含在form表单中) 解决方案:添加一层form标签 <div cla ...

  2. Hadoop NameNode 元数据以及查看元数据的方式

    HDFS中NameNode工作机制1.NameNode的主要功能(1)负责客户端请求的响应: (2)负责元数据的管理. 2.元数据管理namenode对数据管理采用了三种存储形式: (1)内存元数据: ...

  3. [代码审计]PHP_Bugs题目总结(2)

    写的有点多了,上一篇放在一起显得有点臃肿,就再起一篇吧~ 迷路的老铁点这里:[代码审计]PHP_Bugs题目总结(1) 0x14 intval函数四舍五入 <?php if($_GET[id]) ...

  4. 【CSP模拟赛】奇怪的队列（树状数组 &二分&贪心）

    题目描述 nodgd的粉丝太多了,每天都会有很多人排队要签名.  今天有n个人排队,每个人的身高都是一个整数,且互不相同.很不巧,nodgd今天去忙别的事情去了,就只好让这些粉丝们明天再来.同时nod ...

  5. ubuntu之路——day7.4 梯度爆炸和梯度消失、初始化权重、梯度的数值逼近和梯度检验

    梯度爆炸和梯度消失: W[i] > 1:梯度爆炸(呈指数级增长) W[i] < 1:梯度消失(呈指数级衰减) *.注意此时的1指单位矩阵,W也是系数矩阵 初始化权重: np.random. ...

  6. 面试题 int(3) int(10) 区别

    1.MySQL 中 int(3) int(10) 区别 答案 存储大小并无差异,只是不足位数的时候,左边补0. ###补充知识点 创建数据库表时,加zerofill ,可以看出效果.mysql 默认 ...

  7. JWT Claims

    JWT Claims “iss” (issuer)  发行人 “sub” (subject)  主题 “aud” (audience) 接收方 用户 “exp” (expiration time) 到 ...

  8. Python-matplotlib画图(莫烦笔记)

    https://www.zhihu.com/collection/260736383 https://blog.csdn.net/gaotihong/article/details/80983937 ...

  9. Fiddler查看request是由哪一个process发起的

    有一个Process列 查看到进程编号是24836 然后用chrome自带的TaskManager查看对应的是哪一个进程 https://www.lifewire.com/google-chrome- ...

  10. JVM常量的含义与反编译助记符详解

    1.定义一个常量 public class MyTest2 { public static void main(String[] args) { System.out.println(MyParent ...