2020-08-05

对不起我瘦不了� �

于 2020-08-05 11:42:24 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/weixin_43966128/article/details/107811579

版权

吸顶效果

一、通过监听scroll事件，实现吸顶功能

吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候设置吸顶元素的position : fixed;属性

写入事件监听，监听滚动条。

js

mounted () {
   window.addEventListener('scroll', this.handleScroll);
},
destroyed(){
    window.removeEventListener('scroll', this.handleScroll);
},
methods: {
      handleScroll () {  
          this.$nextTick(() => {
              let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
              let offsetTop = document.querySelector('#searchBar').offsetTop;
              if (scrollTop > offsetTop) {
                  this.searchBarFixed = true;
              } else {
                  this.searchBarFixed = false;
              }
          })
      }
}

css

.isFixed{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
}

在对应的标签中加入修改后的样式

<div id="searchBar" :class="searchBarFixed== true?'isFixed':''">

二使用css 粘性定位 position: sticky; 属性实现

首先给需要吸顶效果的子元素设置 position: sticky; top:0; 给父元素添加 position :relative;

position:sticky; 在屏幕范围内不受 left ，top 影响，当到元素接近偏移区域是会变成 fixed，会自动固定在 top ，left 等实现粘性吸顶！它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

position: -webkit-sticky;//safari 里这样写

原生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>