В Vue.js, как заставить навигацию появляться при событии прокрутки вниз и исчезать там, где scroll pageYOffset = 0 - PullRequest
Новая
       16

В Vue.js, как заставить навигацию появляться при событии прокрутки вниз и исчезать там, где scroll pageYOffset = 0

0 голосов
/ 28 сентября 2018

Я работаю над проектом Vue.js и застрял в небольшой анимации для заголовка навигационной панели.

Я хочу прослушать событие прокрутки пользователей, а также постепенно увеличивать и уменьшать навигационную панель,если пользователь прокручивает вниз, затемняет и если пользователь прокручивает вверх: 0 исчезает, и показывает полноэкранное вступление без панели навигации.Навигация зафиксирована / закреплена сверху.

Как я могу сделать это, используя Vue.js?

для лучшей визуализации: это скриншот моей страницы

1 Ответ

0 голосов
/ 28 сентября 2018

Я адаптировал это решение к вашему случаю, добавив свойство showNavbar к вашему объекту данных, который изменяет состояние панели навигации, и используя элемент transition с name='fade', который обертывает элемент navbar, в вашем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>
...