반응형
Vue.js에서 스크롤 다운 이벤트에서 네비게이션 페이드인 및 페이드아웃을 하는 방법YOffset = 0
저는 Vue.js 프로젝트를 진행하고 있으며, 헤더 네비게이션 바의 작은 애니메이션에 빠져 있습니다.
사용자 스크롤 이벤트를 듣고 네비게이션 바를 페이드인/페이드아웃하고, 사용자가 아래로 스크롤하면 페이드인, 위로 스크롤하면 페이드아웃하고, 네비게이션 바 없이 전체 화면 인트로를 표시하고 싶다.내비게이션은 상단에 고정되어 있습니다.
Vue.js를 사용하여 이 작업을 수행하려면 어떻게 해야 합니까?
더 나은 시각화를 위해: 이것은 내 페이지의 스크린샷입니다.
이 솔루션을 귀사의 사례에 맞게 수정했습니다.showNavbar데이터 객체에 대한 속성으로 네비게이션바 상태를 변경하고transition으로 구성하다.name='fade'그것은 포장되어 있다navbarCSS에서 다음 규칙을 추가해야 합니다.
.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>언급URL : https://stackoverflow.com/questions/52546606/in-vue-js-how-to-make-a-nav-fade-in-on-scroll-down-event-and-fade-out-where-scro
반응형
'programing' 카테고리의 다른 글
| 왜 sun.misc는?안전하지 않은 것이 존재하며, 현실에서 어떻게 사용될 수 있을까요? (0) | 2022.07.26 |
|---|---|
| TypeError: 정의되지 않은 속성 'getters'를 읽을 수 없습니다. (0) | 2022.07.26 |
| vuejs의 html 태그에 dir rtl 특성 추가 (0) | 2022.07.26 |
| Vuex 상태를 업데이트하면 LokiJS 데이터도 변경됩니다. 이유가 무엇입니까?Vuex / LokiJs (0) | 2022.07.26 |
| Vue: 테이블에 중첩된 데이터 표시 (0) | 2022.07.26 |