Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the top floating fixed function when sliding with vue+jquery+lodash

php中世界最好的语言
Release: 2018-05-15 09:46:12
Original
2347 people have browsed it

This time I will bring you a detailed explanation of the implementation of the top suspension fixation function when vue jquery lodash slides. What are the precautions on how to implement the top suspension fixation function when vue jquery lodash slides. The following is a practical case, let's come together take a look.

This effect is a demo effect extracted from a project.

Preparation:

1. Introduce jQ

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
Copy after login

Introduce lodash.js

npm install lodash -D
Copy after login

fixTop.vue component

<template>
 <p class="fixtop2">
  <header class="header" ref="header"></header>
  <p class="nav" ref="nav" :class="{isFixed:isFixed}">
   <p class="box" v-for="(item,index) in list" :key="index">
    {{item.title}}
   </p>
  </p>
  <ul class="content">
   <li v-for="(item,index) in new Array(20)" :key="index">{{index+1}}</li>
  </ul>
 </p>
</template>
<script>
var throttle = require(&#39;lodash/throttle&#39;); //从lodash中引入的throttle节流函数
export default {
 name: &#39;navScroll2&#39;,
 data() {
  return {
   list: [
    { title: &#39;AAAA&#39;, id: 1 },
    { title: &#39;BBBB&#39;, id: 2 },
    { title: &#39;CCCC&#39;, id: 3 },
    { title: &#39;DDDD&#39;, id: 4 },
   ],
   isFixed: false, //是否固定的
   throttleScroll: null, //定义一个截流函数的变量
  };
 },
 methods: {
  //滚动的函数
  handleScroll() {
   let h = $(this.$refs.header).outerHeight(); //header的高度
   let wh = $(window).scrollTop(); //滚动的距离的,为什么这里使用的jq,因为不用考虑的什么的兼容问题
   let navH = $(this.$refs.nav).outerHeight(); //nav的高度
   if (wh > h) {
    this.isFixed = true;
   } else {
    this.isFixed = false;
   }
  },
 },
 mounted() {
  //写在掉接口的里面的
  this.$nextTick(() => {
   //这里使用监听的scroll的事件,为什么要使用的节流函数,如果不使用的,页面一直在滚动计算的,这样在
   //使用手机时候,出现非常卡的,隔一段时间计算,大大降低了性能的消耗(具体的好处自己去查资料)
   window.addEventListener(&#39;scroll&#39;, this.throttleScroll, false);
  });
  this.throttleScroll = throttle(this.handleScroll, 100);
 },
 deactivated() {
  //离开页面需要remove这个监听器,不然还是卡到爆。
  window.removeEventListener(&#39;scroll&#39;, this.throttleScroll);
 },
};
</script>
<style lang="scss" scoped>
.fixtop2 {
 min-height: 100vh;
}
.header {
 height: 5rem;
 width: 100%;
 background-color: red;
}
.nav {
 display: flex;
 width: 100%;
 background-color: pink;
 &.isFixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
 }
 .box {
  font-size: 0.3rem;
  padding: 0 0.3rem;
  height: 0.9rem;
  line-height: 0.9rem;
  color: #333333;
  flex: 1;
 }
}
.content {
 height: 20rem;
 li {
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #000;
 }
}
</style>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Angular5 routing value transfer method summary

JS implements transparency gradient function

The above is the detailed content of Detailed explanation of the top floating fixed function when sliding with vue+jquery+lodash. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template