vue实现导航栏吸顶效果 + 与内容联动

Posted 2022-01-26 努力学前端的南宫

大家好，我是南宫。今天写一篇博客来整理下最近刚解决的一个问题，那就是导航栏跟内容联动的问题。

 

简单说一下我想要的效果：写了一个宽度为屏幕100%的div，居中的部分是一个导航栏，水平排列，默认位于banner下，如果页面滚到了banner下面，要让导航栏固定顶部。如果页面滚到了下方对应的内容，那就高亮对应的tab标记。如果点击了tab，那就要让页面滚到对应的内容，并且让该tab高亮。

（效果是动态的，我随便截取一个场景来展示吧，比如我点击“应用场景”的时候，页面滚动到了对应的内容区域，并且对应的tab高亮了，也能看到导航栏固定顶部）

拆解一下，可以分为这么几个部分：①吸顶、②选择tab，可以让页面滚动到对应内容的位置、③页面滚动到了对应的内容的位置，可以设置tab的选择。

吸顶的实现：

这个是最容易的，我先简单说一下原理：默认导航栏是位于banner下方的，也就是普通的标准流元素，没有浮动没有定位，是正常占位的；而固定顶部的状态下，导航栏被固定定位（position: fixed）到了顶部，这个时候可以设置一下top。我们可以判断当前滚动的位置是否需要固定定位，如果是，那就做一下样式的切换。

显然导航栏有两种状态，所以我们可以写两个class来分别控制。（我这里使用SCSS，可以参考一下我的代码，nav-bar是默认状态，再加上fixed的是固定顶部的状态）

// 导航条
.nav-bar 
    height: 61px;
    background: url("/img/download/rect_bg.png") repeat-x;
    background-size: 5px 61px;
    &.fixed 
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        z-index: 10;
    
    .nav-bar-item 
        position: relative;
        margin: 0 47px;
        line-height: 55px;
        cursor: pointer;
        &:hover::after,
        &.active::after 
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: $dark-blue;
        
        .nav-text 
            font-size: 16px;
            color: #333;
        
    

那么怎么控制导航栏是否固定顶部呢？可以在data里放一个变量（如isFixed）来控制，默认为false。监听一下页面的滚动，如果滚动超过了某个值，就让isFixed改为true，否则改为false。然后在导航栏这边，动态绑定class，“fixed”在isFixed为true才设置上去。

 data() 
    return 
      // 是否固定
      isFixed: false,
      //...其他data
   

// 处理滚动
    handleScroll() 
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // console.log(scrollTop) // 滑动的长度
      var offsetTop = document.querySelector('.banner').offsetHeight
      
      // 吸顶效果
        if (scrollTop > offsetTop) 
          this.isFixed = true
         else 
          this.isFixed = false
        
    ,

<div class="nav-bar" :class=" fixed: isFixed ">...</div>

Vue项目中如何监听页面的滚动呢?把刚才的handleScroll定义到组件的methods里面，在mounted的时候绑定window的滚动时间，注意是在mounted的时候才可以使用DOM。退出页面的时候，也要记得销毁监听。

mounted() 
    window.addEventListener('scroll', this.handleScroll) // 监听滑动事件
  ,
  destroyed() 
    window.removeEventListener('scroll', this.handleScroll) // 销毁监听滑动事件
  

点击选择tab，让页面滚动到对应内容的实现：

首先，tab会有普通状态和高亮状态，所以我们也需要用一个变量来控制当前选中的、处于高亮状态的tab是第几个，默认为0，让第一个tab高亮。

 data() 
    return 
      // ...其他data
      // 当前选择的tab
      currentNav: 0,
    

  <!-- 这是导航条里的每一个tab，给它动态绑定active类，高亮才显示，并且绑定了点击事件 -->
  <div
     v-for="(item, index) in obj.contentList"
     :key="index"
     class="nav-bar-item"
     :class=" active: currentNav == index "
     @click="toBox(index)"
  >
     <span class="nav-text"> item </span>
  </div>

然后，页面上有好几块内容，每一块对应一个tab，我们给这几块内容的最外层加上一个class，作为标记，便于选择这些锚点元素，比如我给它们加上“j-content”这个类名。这样就实现了导航栏和每块内容的绑定。

    <!-- 这是其中的一块内容 -->
    <div class="scene j-content">
      <h3 class="production-title">应用场景</h3>
      <!-- 其他内容 -->
    </div>

点击tab的时候，我们可以获取到当前点击的tab的索引（比如第1个的索引是0），在带有j-content的div里，我们找到下标相同的div（如索引为0的时候找到第一个这样的div），获取它顶部的坐标，让页面滚动到这里。

（看下面的代码，从所有的带有j-content的class里找到对应当前索引的div，获取它的offsetTop，然后用window.scrollTo平滑滚动到指定地方，这里用behavior设置了平滑滚动）

    // 滚动到哪一块
    toBox(index) 
      this.currentNav = index
      const DOM = document.querySelectorAll('.j-content')[index]
      const offsetTop = DOM.offsetTop - 25
      // console.log('滚动到哪里', DOM)
      window.scrollTo(
        top: offsetTop,
        behavior: 'smooth'
      )
    ,

页面滚动到对应内容，设置tab高亮的实现：

首页，要判断页面滚到到了哪一块内容，就得监听页面的滚动事件，所以判断的代码需要写到handleScroll方法里。

然后滚动的时候，滚动的位置跟哪些值比较呢？这就需要我们记录每一块内容的offsetTop的位置。根据之前定好的class，找到每一块内容的div，获取一下它们各自的offsetTop，并保存。

// 获取所有锚点元素
const divs = [...document.querySelectorAll('.j-content')]
// 将所有锚点元素offsetTop push到数组内
divs.forEach((item, index) => 
  this.contentTopList[index] = item.offsetTop - 25
)

接着，在滚动的过程中，怎么确定当前要高亮的tab是哪个呢？我们可以把当前的scrollTop值与每一个div的offsetTop比较，找到“小于但又最接近”的那个值，把这个下标作为要高亮的tab的下标。

（我补充了一个判断，假如刚开始滚，还没有滚到第一个内容区域的话，navIndex会算出来undefined，为了让这个时候也有tab被高亮，我认为当前高亮的是0.）

let navIndex
// 滚动定位tab高亮的状态
for (let i = 0; i < this.contentTopList.length; i++) 
   // 如果当前滚动的top坐标大于第i个的top坐标，就记录下i。
   // 记录到最后，i就会是最后一个满足条件的i，也就是刚刚好的那个值
   if (scrollTop >= this.contentTopList[i]) 
      navIndex = i
   

 // 把下标赋值给 vue 的 data
this.currentNav = navIndex
if (typeof navIndex !== 'number') 
    this.currentNav = 0

到这一步，就已经做到了滚动吸顶、点击tab滚动到相应的锚点、滚动高亮对应的tab。但是在调试的时候我又发现了一个问题——点击tab，页面滚动的过程中，经过其他区域的时候，也会点亮对应的tab，这就显得效果有些拖泥带水，不像是被直接定位过去的。

于是我觉得，需要区分这两种情况：“因为点击而直接滚动到这里”  和 “页面自己滚动的时候路过这里”。我在data里加了一个新的变量，叫isClick，默认为false，表示不是点击定位的。在点击tab后，瞬间把isClick赋值为true。然后在“根据滚动位置，判断高亮tab”之前，先判断isClick，确定不是点击定位的才判断。在点击动作完成、滚动完毕后，过一小段时间，把isClick还原成true，以便恢复后续的滚动高亮效果。

完整的handleScroll和toBox代码在这里：

// 处理滚动
    handleScroll() 
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // console.log(scrollTop) // 滑动的长度
      var offsetTop = document.querySelector('.banner').offsetHeight
      // 判断是否已经记录了每个内容的top，如果不是，就记录一下。如果是，就直接使用
      // 获取所有锚点元素
      const divs = [...document.querySelectorAll('.j-content')]
      // 将所有锚点元素offsetTop push到数组内
      divs.forEach((item, index) => 
        this.contentTopList[index] = item.offsetTop - 25
      )
      // if (this.contentTopList.length === 0) 

      // 
      // 判断当前是否是点击定位的，如果不是，才有滚动定位的效果
      if (!this.isClick) 
        let navIndex
        // 滚动定位tab高亮的状态
        for (let i = 0; i < this.contentTopList.length; i++) 
          // 如果当前滚动的top坐标大于第i个的top坐标，就记录下i。记录到最后，i就会是最后一个满足条件的i，也就是刚刚好的那个值
          if (scrollTop >= this.contentTopList[i]) 
            navIndex = i
          
        
        // 把下标赋值给 vue 的 data
        this.currentNav = navIndex
        if (typeof navIndex !== 'number') 
          this.currentNav = 0
        
      
      // 吸顶效果
      if (scrollTop > offsetTop) 
        this.isFixed = true
       else 
        this.isFixed = false
      
    ,
    // 滚动到哪一块
    toBox(index) 
      // 点击滚动到指定的位置，要去掉滚动的过程中因为位置变化带来的效果
      this.isClick = true
      this.currentNav = index
      const DOM = document.querySelectorAll('.j-content')[index]
      const offsetTop = DOM.offsetTop - 25
      // console.log('滚动到哪里', DOM)
      window.scrollTo(
        top: offsetTop,
        behavior: 'smooth'
      )
      // 过一段时间，把isClick还原
      setTimeout(() => 
        this.isClick = false
      , 800)
    ,

 还有20分钟就是新年了，我总算赶在2021年写完了这一篇博客，欢迎有类似需要的小伙伴来探讨哦，谢谢大家！