如何忽略基於javascript的轉換

Question

Heyy guys，

起初我想爲我的壞英語道歉。

我想提出一個網站至極，你可以在這裏找到的那​​一刻：http://rekenopjetoekomst.nl/test/test.html

當你向下滾動菜單下的照片會降低的高度。但是您需要通過幻燈片瀏覽的箭頭也必須消失。我正在通過將不透明度更改爲0進行過渡。

但我的問題是，當你向下滾動，然後快速向上滾動（第二或什麼），你仍然會看到箭頭（0.6或不透明度的東西）。 Soo ..我想要的是：當箭頭不在屏幕上時，不透明度必須爲0，而無需轉換。如果你回滾到foto，箭頭必須隨着轉換出現。

Thnx爲您提供所有幫助！

的Javascript（僅用箭頭1和2）：

function yScroll(){ 
    pijl1 = document.getElementById('pijl1'); 
    pijl2 = document.getElementById('pijl2'); 
    yPos = window.pageYOffset; 

    if(yPos > 100 && yPos < 370){ 
     pijl1.style.opacity = "0.8"; 
     pijl2.style.opacity = "0.8"; 
    } else if(yPos > 370){ 
     pijl1.style.opacity = "0.0"; 
     pijl2.style.opacity = "0.0"; 
    } 
} 
var animateInterval = setInterval(yScroll,10); 

CSS：

#mainbox #foto #pijl1 { 
    transition: opacity 1s ease-in 1.3s; 
} 
#mainbox #foto #pijl2 { 
    transition: opacity 1s ease-in 1.3s; 
} 

Answer 1

我會用一個三態設置。

第一個狀態是可見（正常）狀態。第二種是衰落狀態，不透明度設置爲0，並且存在轉變。第三個是外面的狀態。在這一個，我們設置不透明度爲0，但沒有延遲。

要根據滾動級別上管理這個問題，我們創建3個班，和ASIGN每一個

演示與擴展定時，使得它更容易看到

function yScroll(){ 
 
    ele = document.getElementById('test'); 
 
    yPos = window.pageYOffset; 
 

 
    if(yPos > 200){ 
 
     ele.className = "out"; 
 
    } else if(yPos > 100){ 
 
     ele.className = "fading"; 
 
    } else { 
 
     ele.className = "normal"; 
 
    } 
 
} 
 
var animateInterval = setInterval(yScroll,10);

#test { 
 
    height: 50px; 
 
    width: 100px; 
 
    margin-top: 300px; 
 
    background-color: green; 
 
} 
 

 

 
.pusher { 
 
    margin: 3000px; 
 
} 
 

 
.out { 
 
    opacity: 0.1; 
 
    transition: opacity 0.1s; 
 
} 
 

 
.fading { 
 
    opacity: 0.2; 
 
    transition: opacity 20s; 
 
} 
 

 
.normal { 
 
    opacity: 1; 
 
    transition: opacity 20s; 
 
}

<div id="test"></div> 
 
<div class="pusher"></div>