井井客

搜索

仿手机端点菜菜单滚动效果

之前有抽空写过这个demo,但是后面不用就删掉了,但是最近有小伙伴正好需要,所以又整理了一下,顺便在这边备份~

仿手机端点菜菜单滚动效果

效果可以查看:http://jingjingke.com/web/dishMenu.html

代码如下:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>仿手机端点菜菜单滚动效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <style>
      *{margin:0;padding:0}
      li,ul{list-style:none}
      .footer,.header{position:fixed;left:0;z-index:9;width:100%;height:60px;background:#eee;text-align:center;line-height:60px}
      .header{top:0}
      .footer{bottom:0}
      .main-left{position:fixed;top:60px;width:25%}
      .main-left ul{position:absolute;width:100%}
      .main-left li{height:44px;border-bottom:1px solid #eee;background:#fff;text-align:center;line-height:44px}
      .main-left li.on{background:#6495ed}
      .main-right{padding-left:25%;width:75%}
      .main-right .title{background:#f8f8f8;text-indent:2em;font-size:18px;font-weight:bold;line-height:44px}
      .main-right li{border-bottom:1px dashed #e8e8e8;background:#f3ffff;text-indent:2em;line-height:60px}
      .main-right li:last-child{border-bottom:none}
      body:after,body:before{display:block;content:''}
      body:before { height: 60px;}/*同header高*/
      body:after { height: 60px;} /*同footer高*/
    </style>
  </head>
  <body>
    <div class="header">头部</div>
    <div class="main">
      <div class="main-left">
        <ul>
          <li>菜单1</li><li>菜单2</li><li>菜单3</li><li>菜单4</li><li>菜单5</li><li>菜单6</li><li>菜单7</li><li>菜单8</li><li>菜单9</li><li>菜单10</li><li>菜单11</li><li>菜单12</li><li>菜单13</li><li>菜单14</li><li>菜单15</li><li>菜单16</li><li>菜单17</li><li>菜单18</li><li>菜单19</li><li>菜单20</li><li>菜单21</li><li>菜单22</li>
        </ul>
      </div>
      <div class="main-right">
        <h3 class="title">菜品1</h3>
        <ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品2</h3>
        <ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品3</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品4</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品5</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品6</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品7</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品8</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品9</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品10</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品11</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品12</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品13</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品14</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品15</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品16</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品17</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品18</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品19</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品20</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品21</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
        <h3 class="title">菜品22</h3><ul><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li><li>菜品</li></ul>
      </div>
    </div>
    <div class="footer">尾部</div>
    <script src="http://www.jingjingke.com/res/js/jquery.min.js"></script>
    <script>
      var $arrScroll = [];
      var $body = $('body').height();
      var $screen = $(window).height();
      var $header = $('.header').height();
      var $footer = $('.footer').height(); 
      var $index=0 , $tempIdx=0;
      
      //获取滚动关键点位置
      $('.main-right .title').each(function(){
        $arrScroll.push( $(this).offset().top-$header);
      })
      
      //获取left根据索引应该定位
      var $left = $('.main-left li');
      var $leftUl = $('.main-left ul');
      var $leftWarp = $screen-$header-$footer;
      var $leftEle = $left.height()+1;
      var $leftPoArr = [];
      var $leftPo = 0;
      for(var j=0; j<$left.length; j++){
        $leftPo = (j+1)*$leftEle<=$leftWarp?0:$leftWarp-(j+1)*$leftEle;
        $leftPoArr.push($leftPo);
      }
      //初始化索引值
      winSrcoll();
      if(!$left.hasClass('on')){
        $left.eq(0).addClass('on')
      }
      //监听滚动条事件
      $(window).on('scroll',winSrcoll)
      function winSrcoll(){
        var $scrollTop = $(this).scrollTop();
        //循环对比获取当前索引位置
        for(var i=0; i<$arrScroll.length; i++){
          if(i===0 && $scrollTop < $arrScroll[i]){
            $tempIdx=0;
          }else if(i === $arrScroll.length-1 && $scrollTop >= $arrScroll[$arrScroll.length-1]){
            $tempIdx=i;
          }else if($scrollTop >= $arrScroll[i] && $scrollTop < $arrScroll[i+1]){
            $tempIdx=i;
          }
        }
        
        //如果索引有变化样式替换
        if($tempIdx !== $index){
          $left.eq($index).removeClass('on');
          $left.eq($tempIdx).addClass('on');
          $leftUl.css({'top':$leftPoArr[$tempIdx]})
          $index = $tempIdx;
        }
        
        //如果滚动条已经滑动底到
        if($scrollTop+$screen === $body){
          $leftUl.css({'top':$leftPoArr[$leftPoArr.length-1]})
        }
      }
    </script>
  </body>
</html>

相比之前那份有点点进步。主要就是在左侧菜单针对可能出现的位置变化而使用了一个数组($leftPoArr)来记录。

同时有两个关键的索引,在dom操作时,减少了性能消耗。

文章TAG:JQ

作者:井井客原创来源:原创
本文标题:仿手机端点菜菜单滚动效果
本文链接:http://www.jingjingke.com/c/17269.html

上一篇:json数组转树型嵌套结构
下一篇:JS分割字符串与拼接数组

文章分类

相关阅读

随便看看