<!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. C Primer Plus--结构和其他数据类型(1)

    目录 结构变量 structure variable 建立结构声明 定义结构声明 结构数组 嵌套结构 结构指针 使用指针访问结构成员 结构用于传参 在结构中使用指针的危害 联合(Union)数据结构 ...

  2. Large Kernel Matters —— Improve Semantic Segmentation by Global Convolutional Network（GCN全局卷积网络）

    作者认为语义分割的两个挑战是分类和定位,而这两个挑战又是比较对立的.对于分类问题,模型需要有变形和旋转不变形,而对于定位问题,模型有需要对变形敏感. 提出的GCN遵循两个主要原则: 1.对定位问题,模 ...

  3. CSS角度单位：deg、grad、rad、turn

    1.deg 度(Degress).一个圆共360度 90deg = 100grad = 0.25turn ≍ 1.570796326794897rad -moz-transform: rotate(2 ...

  4. elasticsearch x-pack license过期

    1.注册一个新的license,每一项都要填写,每次可以使用一年,一年到期后再来注册一个新的 2.更新license (官方文档:https://www.elastic.co/guide/en/x-p ...

  5. vmWare安装centos7之后使用yum安装提示there are on enabled repos（修改yum源）

    可以使用这个命令修改yum源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.rep ...

  6. 《Linux设备驱动程序》第三版 scull编译 Ubuntu18.04

    0 准备工作. 0.0 系统环境:Ubuntu18.04.1 amd64. 0.1 安装必要软件包 1 sudo apt install build-essential bison flex libs ...

  7. 微信小程序-收货地址左滑删除

    我参照了其中的部分代码,如:bindtouchstart,bindtouchmove,bindtouchend事件多数组中偏移值的更改, 在结合微信 movable-area 和 movable-vi ...

  8. ActiveMQ相关API

    一.Producer 1,发送消息 MessageProducer send(Message message)发送消息到默认目的地,就是创建Producer时指定的目的地. send(Destinat ...

  9. java使用json-lib库的json工具类.

    import net.sf.ezmorph.object.DateMorpher;import net.sf.json.JSONArray;import net.sf.json.JSONObject; ...

  10. mongodb批量update更新数据

    需要先查找出相关的记录,然后循环处理更新数据.如下案例,更新所有status=1的数据的gender值为2 db.getCollection('test').find({"status&qu ...