<!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. P1378 油滴扩展——搜索小记

    P1378 油滴扩展 记得这道题好久以前(好像是上个学期?) 就想做了,但是看着里面的半径边界好像很难处理就没做(主要是当时刚学OI(菜还给自己找借口)): 今天上午一直研究SG函数,做的都自闭了,晚 ...

  2. php 运算符的优先级

    由上到下,依次递减,同行优先级相同. 结合方向 运算符 附加信息 无 clone new clone 和 new 左 [ array() 右 ** 算术运算符 右 ++ -- ~ (int) (flo ...

  3. Java 中Math常用方法

    import java.text.SimpleDateFormat; import java.util.Date; public class Test4 { public static void ma ...

  4. Xshell远程连接服务器

    Xshell远程连接服务器 打开xshell后找到左上角第一个“文件”点击,弹出来一个下拉框,选择“新建”点击(或者直接按下快捷键“Alt+n”).         点击“新建”之后就会出现下面这样一 ...

  5. Sublime Text3注册及汉化(支持Windows、MAC OS)

    苹果mac 版本下载 点击下载https://download.sublimetext.com/Sublime%20Text%20Build%203114.dmg PART_A 注册 v3103及以上 ...

  6. .NET Core教程--给API加一个服务端缓存啦

    以前给API接口写缓存基本都是这样写代码: // redis key var bookRedisKey = ConstRedisKey.RecommendationBooks.CopyOne(book ...

  7. iTunes Connect上传APP屏幕快照图片失败 - 您必须上传有效的屏幕快照。

    您必须上传有效的屏幕快照. 原因很简单:这个屏幕快照 要用 iPhone截屏才可以,你自已随便在电脑上截个图肯定不行 //--------------------------------------- ...

  8. JVM 类加载器ClassLoader源码学习笔记

    类加载 在Java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的. 类型可以是Class,Interface, 枚举等. Java虚拟机与程序的生命周期 在如下几种情况下,Java虚拟机 ...

  9. Type-C转接头 还是别用了，影响速率啊

      今天用Type-C转接USB头传照片真慢! 在数码配件领域,越是不起眼的小外设,隐藏其背后的猫腻和水分也就越多.就拿常见的Micro USB转USB Type-C转接头和TF转SD卡套而言,你觉得 ...

  10. python : 设计模式之外观模式(Facade Pattern)

    #为啥要用外观模式举例说明 这个例子很形象,直接从人家博客上贴过来的,参考链接在下面 不知道大家有没有比较过自己泡茶和去茶馆喝茶的区别,如果是自己泡茶需要自行准备茶叶.茶具和开水,如图1(A)所示,而 ...