[英]Triggering active class on scroll, Angular 5 without Jquery
我需要有關在滾動應用程序時如何觸發添加類而不使用jQuery的說明。
我有這種結構的側面菜單
<div class="menu">
<div class="menu-item">
<div class="line"></div>
<span class="home">Home</span>
</div>
<div class="menu-item">
<div class="line"></div>
<span class="other">Venture Creation</span>
</div>
<div class="menu-item">
<div class="line"></div>
<span class="other">Product Studio</span>
</div>
<div class="menu-item">
<div class="line"></div>
<span class="other">Portfolio</span>
</div>
<div class="menu-item">
<div class="line"></div>
<span class="other">what i do</span>
</div>
<div class="menu-item">
<div class="line"></div>
<span class="other">Stay in Touch</span>
</div>
</div>
我有六個部分,高度為100vh,當我在特定部分上滾動時,我需要觸發活動類,因此,當我在部分上(例如)時,我的活動類在以下位置:
<div class="menu-item">
<div class="line"></div>
<span class="other">Portfolio</span>
</div>
我的問題與另一個問題有關,當我在特定部分中時,我還需要觸發一些其他事件。 想法是我在背景上觸發動畫,以便獲得如下網頁所示的效果: https : //sonikpass.com/
我有這樣的結構:
<div class="global-background">
<div class="top-part">
<img class="img-one-top" src="../assets/images/brain1-01.svg" alt="" />
<img class="img-two-top" src="../assets/images/whoiam1-01.svg" alt="" />
<img class="img-three-top" src="../assets/images/whatidid1-01.svg" alt="" />
<img class="img-four-top" src="../assets/images/whatido1-01.svg" alt="" />
<img class="img-five-top" src="../assets/images/connect1-01.svg" alt="" />
</div>
<div class="bottom-part">
<img class="img-one-bottom" src="../assets/images/brain2-02.svg" alt="" />
<img class="img-two-bottom" src="../assets/images/whoiam2-02.svg" alt="" />
<img class="img-three-bottom" src="../assets/images/whatidid2-02.svg" alt="" />
<img class="img-four-bottom" src="../assets/images/whatido2-02.svg" alt="" />
<img class="img-five-bottom" src="../assets/images/connect2-02.svg" alt="" />
</div>
</div>
我已經在CSS中為SlidingInLeft和SlidingInRight做過動畫,所以我只需要包裝這些東西並實現它們。
最好的解決方案是什么?
可以使用directive
通過以下方式監聽mousewheel
事件來實現此目的,
指令代碼
@Directive({
selector: '[wheel]'
})
export class WheelDirective implements OnInit{
constructor(
private renderer: Renderer2,
private el: ElementRef
){}
ngOnInit(){
Array.from(this.el.nativeElement.children).forEach((item,index)=>{
if(index!==0){
item.classList.add('hidden');
}
})
}
@HostListener('mousewheel', ['$event']) onMousewheel(event) {
let parentDiv = event.srcElement.parentElement;
console.log(parentDiv);
let childNodes = Array.from(parentDiv.children);
let currentIndex=-1;
if(parentDiv && parentDiv.children){
childNodes.forEach((item,index)=>{
if(item!==event.srcElement){
item.classList.add('hidden');
}else{
item.classList.add('hidden');
currentIndex = index
}
});
if(currentIndex===(childNodes.length -1)){
currentIndex=0;
}
childNodes[currentIndex+1].classList.remove('hidden');
}
}
的HTML
<div class="top-part" wheel>
<img class="img-one-top" src="https://lorempixel.com/400/200" alt="" />
<img class="img-two-top" src="https://lorempixel.com/400/201" alt="" />
<img class="img-three-top" src="https://lorempixel.com/400/202" alt="" />
<img class="img-four-top" src="https://lorempixel.com/400/300" alt="" />
<img class="img-five-top" src="https://lorempixel.com/400/600" alt="" />
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.