在 Vue.js 中，如何在向下滚动事件时使导航淡入并在滚动 pageYOffset = 0 时淡出答案

【问题标题】：In Vue.js how to make a nav fade in on scroll down event and fade out where scroll pageYOffset = 0在 Vue.js 中，如何在向下滚动事件时使导航淡入并在滚动 pageYOffset = 0 时淡出
【发布时间】：2019-03-03 22:28:18
【问题描述】：

我正在开发一个 Vue.js 项目，但我被困在标题导航栏的小动画上。

我想听用户滚动事件并淡入和淡出导航栏，如果用户向下滚动，淡入并且如果用户滚动回到顶部：0 淡出，并显示没有导航栏的全屏介绍.导航在顶部是固定的/粘性的。

如何使用 Vue.js 做到这一点？

为了更好的可视化： this is the screenshot of my page

【问题讨论】：

标签： vue.js animation vuejs2 frontend vue-component

【解决方案1】：

我通过将showNavbar 属性添加到更改导航栏状态的数据对象并将transition 元素与包装name='fade' 的name='fade' 元素一起使用，从而使this solution 适应您的情况，您必须在CSS 中添加以下规则：

.fade-enter-active
{
transition: all 1s;
  }
 .fade-leave-active {
 transition: all 2s;
  }
 .fade-enter, .fade-leave-to  {
   opacity: 0;
  }

最后你应该为滚动事件添加一个事件监听器，比如：

  window.addEventListener('scroll', this.handleScroll);

并检查window.pageYOffset 的值如下：

  window.pageYOffset>0?this.showNavbar=true:this.showNavbar=false;

以下代码可以正常工作：

new Vue({
  el: '#app',
  data() {
    return {
    showNavbar:false
    }
    },
  methods:{
   handleScroll (event) {
      window.pageYOffset>0?this.showNavbar=true:this.showNavbar=false;
    }
  },
    created () {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
  }
})

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
.fade-enter-active
 {
  transition: all 1s;
}
.fade-leave-active {
  transition: all 2s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;

}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >

</head>
<body>
<div id="app">
<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>
<transition name="fade">
<div id="navbar" class="sticky" v-if="showNavbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>
</transition >

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</div>

</body>
</html>

【讨论】：