我需要有关在我的应用程序中滚动时如何触发添加类而不使用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做了动画,所以我只需要包装这些东西并实现它们。
最佳解决方案是什么?
答案 0 :(得分:0)
通过聆听 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>