zoukankan      html  css  js  c++  java
  • 原生js 实现better-scroll效果,饿了么菜单内容联动,即粘即用

    <!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

    转载于:https://www.cnblogs.com/Tohold/p/10444162.html

  • 相关阅读:
    PHP保留小数的相关方法
    ASP.NET Core MVC 之过滤器(Filter)
    ASP.NET Core MVC 之控制器(Controller)
    ASP.NET Core MVC 之视图组件(View Component)
    ASP.NET Core MVC 之局部视图(Partial Views)
    标签助手(TagHelper)
    ASP.NET Core MVC 之布局(Layout)
    ASP.NET Core MVC 之视图(Views)
    ASP.NET Core MVC 之模型(Model)
    九卷读书:淘宝从小到大的发展 -重读《淘宝技术这十年》
  • 原文地址:https://www.cnblogs.com/twodog/p/12135130.html
Copyright © 2011-2022 走看看