開關類與javascript

Question

你好，我想目標的不透明度divs當用戶向下滾動，當他再次滾動刪除它。這是我得到的代碼迄今。它的作品，但我不明白爲什麼我必須在esle條件中再次循環它，或者是他們做這件事的一種更好的方式。只請求javascript沒有jquery.thank的很多。

window.addEventListener('scroll',visible); 

function visible(){ 
    if(window.pageYOffset>2000){ 
     var x = document.getElementById('wrapper').querySelectorAll('.div'); 
     i = 0; 
     for (var i = 0 ; x.length >i; i++) { 
      x[i].style.opacity = "1"; 
      x[i].style.transition = " 1s ease 0s "; 
     } 
    }else{ 
     var x = document.getElementById('wrapper').querySelectorAll('.div'); 
     i = 0; 
     for (var i = 0 ; x.length >i; i++) { 
      x[i].style.opacity = "0"; 
      x[i].style.transition = " 1s ease 0s "; 
     } 
    } 
} 

Answer 1

你應該更好地設置您#wrapper類，做你的CSS裏面的過渡：

document 
    .querySelector('#wrapper') 
    .classList.toggle('-isVisible', window.pageYOffset > 2000); 

CSS：

#wrapper .div { 
    opacity: 0; 
    transition: opacity 1s ease; 
} 
#wrapper.-isVisible .div { 
    opacity: 1; 
} 

Answer 2

你是對的，你不應該有循環它的兩倍，因爲這是很多重複的代碼。唯一的區別是不透明度是否設置爲根據滾動位置1或0，這樣你就可以移動檢查內循環：

window.addEventListener('scroll',visible); 

function visible(){ 
    var x = document.getElementById('wrapper').querySelectorAll('.div'); 
    i = 0; 
    for (var i = 0 ; x.length >i; i++) { 
     x[i].style.opacity = window.pageYOffset>2000 ? 1 : 0; 
     x[i].style.transition = " 1s ease 0s "; 
    } 
} 

Answer 3

我認爲這實際上可能幫助：Fiddle

var fadeStart=100 // 100px scroll or less will equiv to 1 opacity 
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity 
    ,fading = $('#fading') 
; 

$(window).bind('scroll', function(){ 
    var offset = $(document).scrollTop() 
     ,opacity=0 
    ; 
    if(offset<=fadeStart){ 
     opacity=1; 
    }else if(offset<=fadeUntil){ 
     opacity=1-offset/fadeUntil; 
    } 
    fading.css('opacity',opacity).html(opacity); 
}); 

這裏是原來的問題：Original Question

Answer 4

window.addEventListener('scroll',visible); 

function visible(){ 
    var op; 
    // decide what opacity will be 
    if(window.pageYOffset>2000) 
     op = "1"; 
    else 
     op = "0"; 

    // then loop 
    var x = document.getElementById('wrapper').querySelectorAll('.div'); 
    for (var i = 0 ; x.length >i; i++) { 
     x[i].style.opacity = op; // use op here 
     x[i].style.transition = " 1s ease 0s "; 
    } 
} 

你甚至可以使代碼更短，通過使用三元運算符和forEach像日是：

window.addEventListener('scroll',visible); 

function visible(){ 
    var op = window.pageYOffset > 2000? "1": "0"; 

    // make the selector shorter too 
    querySelectorAll('#wrapper .div').forEach(function(x){ 
     x.style.opacity = op; 
     x.style.transition = " 1s ease 0s "; 
    }); 
}