jquery - 我們滾動時如何淡入淡出元素（div）

我對Jquery和Javascript是如此的陌生。我知道有一堆完全相同的帖子或問題，但沒有它的作品，或者我只是盲目使用它。jquery - 我們滾動時如何淡入淡出元素（div）

我的目標是當我們向下滾動時淡入div，當我們向下滾動某個點時，我想淡出div而另一個div淡入。因爲沒有淡入的問題，但是退色是一個問題。有6個div序列，我想申請。第一個div工作正常，因爲我在2100年向下滾動，我想淡出它，下一個div會淡入淡出，哪些工作非常好。

序列的div id爲＃頭1等和我設置了＃向HEADER2＃header6顯示器無法比擬的CSS。有沒有什麼辦法讓它在窗戶或其他東西的範圍內褪色。非常感謝

這裏是一些我嘗試了劇本，但它不工作

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > 2100) { 
    $('#header1').fadeOut(); 
} 
else { 
    $('#header1').fadeIn(); 
} }); 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > 2100) { 
    $('#header2').fadeIn(); 
} 
else if ($(window).scrollTop() > 3500) { 
    $('#header2').fadeOut(); 
} 
else { 
    $('#header2').fadeOut(); 
} }); 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > 3500) { 
    $('#header3').fadeIn(); 
} 
else { 
    $('#header3').fadeOut(); 
} });

來源

2015-05-04 Saifdean

使用CSS3不透明度轉換並計算alpha的比率。 2100 = 100％，3500 = 0％ – Eric

您注意到了，如何在不使用jQuery的情況下使用CSS3轉換。我谷歌它和大部分的CSS不透明轉換通過將鼠標懸停在它上面發生，我如何作爲用戶在頁面的某個位置的過渡。 – Saifdean

看看http://www.w3schools.com/css/css3_transitions.asp併發布一些代碼，從這裏開始。它基本上像改變其他任何東西一樣改變CSS。如果您不介意硬件加速，也可以使用標準不透明屬性。 – Eric

我認爲你可以做這樣的事情糾正我，如果我有這樣錯誤的你不需要計算你需要.scrollTop（）的位置。

if ($(window).scrollTop() > $("#header").scrollTop())

來源

2015-05-04 03:57:29 DevNiels

#header（div）的位置在CSS中是固定的，忘記提及。所有#header（div）都是按順序排列的，我將顯示設置爲none。所以當我滾動所有我想要的是淡出逐漸淡出的div。 – Saifdean

原因是這樣的：

只是想象，甚至剛剛解僱滾動，和你過去的3500，

$('#header1').fadeOut(); 
$('#header2').fadeIn(); 
$('#header2').fadeOut(); 
$('#header3').fadeIn();

所有執行在精確的同一時間，請問這是故意的嗎？，你應該如果你的2100> scrollTop的< 3500則具備的條件檢查，如果滾動位置2號

之間

：

$('#header1').fadeOut(); 
$('#header2').fadeIn(); 
    $('#header2').fadeOut(); 
    $('#header3').fadeOut();

所有火在完全相同的時間，如果你低於2100則：

$('#header1').fadeIn(); 
    $('#header2').fadeOut(); 
    $('#header3').fadeOut();

均實行在同一時間

來源

2015-05-04 03:57:53

我所做的是'if（$（window））。scrollTop（）> 2100 <3500）{（'＃header2'）。fadeIn（）;並且它不起作用 – Saifdean

if ($(window).scrollTop() > 2100 <3500) { $('#header2').fadeIn(); }

不會工作。您沒有正確書寫if語句。你應該使用類似這樣的代碼：

$(document).ready(function(){ 
if (scrollTop > (2100) && scrollTop < (3500)){ 
    $('#header1').fadeIn('slow'); 
    $('#header2').fadeout('slow'); 
    $('#header3').fadeOut('slow'); 
}else{ 
    $('#header1').fadeOut('slow'); 
    $('#header2').fadeIn('slow'); 
    $('#header3').fadeIn('slow'); 
    } 
});

來源

2015-09-25 12:09:21

jquery - 我們滾動時如何淡入淡出元素（div）

回答

相關問題