<!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. 一步一步跟我学ImGui.第一讲.配置OpenGl2+ImGui环境

    目录 搭建ImGui例子中的第一个OpenGl2环境 一丶搭建OpenGL2环境 1.下载GLFW库 2.解压GLFW库. 3.将GLFW库拷贝到你的工程文件下. 4.配置到Vs2013中. 5.测试 ...

  2. Pytest权威教程21-API参考-05-对象(Objects)

    目录 对象(Objects) CallInfo Class Collector Config ExceptionInfo FixtureDef FSCollector Function Item Ma ...

  3. TCP协议怎么工作的？

    三次握手过程: 第一次 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认:SYN:同步序列编号(Synchronize Sequence N ...

  4. Java SpringBoot全局错误处理类，返回标准结果

    package demo.utils; import com.alibaba.fastjson.JSON; import demo.controller.ProductController; impo ...

  5. [树链剖分]BZOJ3589动态树

    题目描述 别忘了这是一棵动态树, 每时每刻都是动态的. 小明要求你在这棵树上维护两种事件 事件0: 这棵树长出了一些果子, 即某个子树中的每个节点都会长出K个果子. 事件1: 小明希望你求出几条树枝上 ...

  6. 2019SDN上机第4次作业

    一.作业要求 1.解压安装OpenDayLight控制器(本次实验统一使用Beryllium版本) 2.启动并安装插件 3.用Python脚本搭建给定的拓扑,并连接OpenDayLight控制器 4. ...

  7. laravel删除文件

    laravel删除文件 一.总结 一句话总结: 1.注意disk:disk决定路径 2.删单个文件的时候就用删单个文件的方式,别用删多个文件的方式(也就是参数别数组) public function ...

  8. 微信小程序的z-index在苹果ios无效

    1.在微信开发者工具可以正常显示 2.在安卓真机手机可以正常显示 3.在ios手机真机无法正常显示 原因:父级view的css属性有 position: fixed; ,把它注释掉即可

  9. linux: E: Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)

    今天在使用ubuntu执行下列指令的时候出现了错误: sudo apt-get update 解决办法: 输入以下命令: sudo rm /var/cache/apt/archives/lock su ...

  10. UniPush使用指南

    原贴:https://ask.dcloud.net.cn/article/35622 UniPush使用指南 分类:uni-app Push unipush 从HBuilderX 1.7.2起,uni ...