需求背景

试想一下，假如网站的页面内容比较丰富，整个页面的长度将会随之变长。顾客已经翻到了比较靠后的位置，想快速的返回到上面的某个模块去深度参与一下，有的需要滑动半天，无形之中加重了参与的难度，消磨顾客的耐心。
我们再带入一个场景，黑五活动大促。其中包括的品类比较多，商品组合也较多。那么如何让顾客能够快速锁定到目标品类呢？
这个时候如果我们能够给出一个快捷导航的方案，就会便利很多。现存的快捷导航很多都是需要代码深度参与，如何减少代码深度参与，让新手也能轻松创建，是我们需要关心的问题。

1. 实现原理

在section中给楼层添加标记位，计算当前滚动条距离楼层标记位置的高度，如果楼层满足条件则激活楼层。

2. 如何实现

按照我们的实现原理只需要添加2个文件就可以实现此功能。并且这个实现和主题无关。

Section : floor.liquid , floor-switch.liquid

  1. <div class="floor-scope" style="display: none;" data-floor-name="{{ section.settings.name }}"></div>
  4. {% schema %}
  5. {
  6.   "name": "楼层",
  7.   "tag": "section",
  8.   "class": "floor-section",
  9.   "settings": [
  10.     {
  11.         "type": "text",
  12.         "id": "name",
  13.         "label": "楼层名称"
  14.     }
  15.   ],
  16.   "presets": [
  17.     {
  18.       "name": "楼层"
  19.     }
  20.   ]
  21. }
  22.   {% endschema %}
  1. <style>
  2.   #floor-nav {
  3.     position: fixed;
  4.     left: 0;
  5.     z-index: 999;
  6.     left: 50px;
  7.     top: 40%;
  8.     -webkit-transform: translate(-50%, -50%);
  9.     transform: translate(-50%, -50%);
  10.     display: none;
  11.     background: #eee;
  12.   }
  13.   #floor-nav .floor-nav-item {
  14.     width: 6vh;
  15.     height: 6vh;
  16.     line-height: 6vh;
  17.     text-align: center;
  18.     cursor: pointer;
  19.     position: relative;
  20.     font-weight: bold;
  21.   }
  22.   #floor-nav .item__name {
  23.     display: none;
  24.     color: darkred;
  25.     font-size: 16px;
  26.     position: absolute;
  27.     left: 6vh;
  28.     width: 600%;
  29.     top: 0;
  30.     text-align: left;
  31.     margin-left: 20px;
  32.   }
  33.   #floor-nav .active, #floor-nav .floor-nav-item:hover {
  34.     background: darkred;
  35.     color: #fff;
  36.   }
  37. </style>
  39. {%- if section.settings.enable_floor -%}
  40. <div id="floor-nav" style="display: none;">
  42. </div>
  43. <div id="go-top"></div>
  44. {%- endif -%}
  46. {%- if section.settings.enable_floor -%}
  47. <script>
  48.   $(document).ready(function() {
  49.     var html = '';
  50.     $('.floor-section').each(function(index, element) {
  51.       var name = $(element).find('.floor-scope').attr('data-floor-name');
  52.       html += `<div class="floor-nav-item">
  53.           <span class="item__index">${index + 1}F</span>
  54.           <div class="item__name">${name}</div>
  55.         </div>`;
  56.     })
  57.     $('#floor-nav').append($(html));
  59.       var floorNav = $('#floor-nav');//导航壳
  60.       var floorNavItem = floorNav.find('.floor-nav-item');//导航
  61.       var floorScope = $('main .floor-section');//楼层
  62.       var goTopBtn = $('#go-top');
  63.             //回到顶部
  64.             $(window).scroll(function(){
  65.                  var winHeight = $(window).height();//可视窗口高度
  66.                  var scrollTop = $(window).scrollTop();//鼠标滚动的距离
  68.                  if(scrollTop>=$('#shopify-section-header').height()){
  69.                      floorNav.fadeIn();
  70.                      goTopBtn.fadeIn();
  71.                  //鼠标滑动式改变    
  72.                  floorScope.each(function(index){
  73.                      if(winHeight + scrollTop - $(this).offset().top > winHeight/2){
  74.                          floorNavItem.removeClass('active');
  75.                          floorNavItem.eq(index).addClass('active');
  76.                      }
  77.                  })
  78.                  }else{
  79.                      floorNav.fadeOut();
  80.                      goTopBtn.fadeOut();
  81.                  }
  82.             })
  84.       floorNavItem.on('mouseenter', function() {
  85.         var itemName = $(this).find('.item__name');
  86.         itemName.fadeIn();
  87.         setTimeout(() => {
  88.           itemName.fadeOut();
  89.         }, 1000)
  90.       });
  91.             //点击top回到顶部
  92.             goTopBtn.click(function(){
  93.                 $('body,html').animate({"scrollTop":0},500)
  94.             })
  95.             //点击回到当前楼层
  96.             floorNavItem.click(function(){
  97.         var that = this;
  98.                 var t = floorScope.eq($(this).index()).offset().top;
  99.                 $('body,html').animate({"scrollTop":t}, 500, function() {
  100.           $(that).siblings().removeClass('active');
  101.         });
  102.                 $(this).addClass('active');
  103.         $(this).siblings().removeClass('active');
  104.             });
  105.   });
  106. </script>
  107. {%- endif -%}
  111. {% schema %}
  112. {
  113.   "name": "楼层开关",
  114.   "tag": "section",
  115.   "class": "floor-switch",
  116.   "settings": [
  117.     {
  118.       "type": "checkbox",
  119.       "id": "enable_floor",
  120.       "label": "是否展示楼层导航",
  121.       "default": false
  122.     }
  123.   ],
  124.   "presets": [
  125.     {
  126.       "name": "楼层开关"
  127.     }
  128.   ]
  129. }
  130. {% endschema %}

3. 展示效果

店铺地址： https://asen-practice.myshopify.com/ 密码：test

测试链接： https://asen-practice.myshopify.com/pages/black-firday

点击查看【bilibili】

Tips: 如有引用请标注源文章地址

关注我的【小红书】，第一时间掌握更新动态

你的鼓励就是我创作的动力！
zanshang.png