背景圖片在滾動時不會改變，但滾動時效果不錯

我是Javascript和Jquery的初學者。我試圖在滾動文字背景圖像發生變化的情況下實現效果。該代碼適用於從上到下滾動的正常工作，但一個圖像在從下往上滾動時不會更改。這是我的代碼，背景圖片在滾動時不會改變，但滾動時效果不錯

<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script> 
$(window).scroll(function(){ 
    var fromTopPx = 200; // distance to trigger 
    var scrolledFromtop = $(window).scrollTop(); 
    if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image 
    { 
     $('html').addClass('scrolled'); 
    } 

    else if(scrolledFromtop > 600 && scrolledFromtop < 1000) // distance to trigger third background image 
    { 
    $('html').addClass('scrolledtwo'); 
    } 

    else{ 
     $('html').removeClass('scrolled'); 
     $('html').removeClass('scrolledtwo') 
    } 
}); 
</script>  
<style> 

html { 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

html { 
    background-image:url(assets/images/b1.jpeg); 
} 

html.scrolled { 
    background-image:url(assets/images/ab3.jpeg); 
} 
html.scrolledtwo { 
    background-image:url(assets/images/ab9.jpeg); 
} 

</style> 
</head>

我在想什麼？

來源

2017-05-25 Riya Jain

除去在其他類你如果和ELSEIF –

唯一的問題是：您並沒有刪除舊的附加類，而是在中間區域添加了新類，即> 600您同時擁有滾動和滾動的類兩個類。

所以一種解決方案是：在添加新類之前刪除舊的類。

在正確的地方使用這些行：

A- $（ 'HTML'）removeClass（ '滾動'）。
b- $（'html'）。removeClass（'scrolledTwo'）;

使用這個腳本：

$(window).scroll(function(){ 
var fromTopPx = 200; // distance to trigger 
var scrolledFromtop = $(window).scrollTop(); 
if(scrolledFromtop > fromTopPx && scrolledFromtop < 600) // distance to trigger second background image 
{ 

    $('html').removeClass('scrolledtwo') 
    $('html').addClass('scrolled'); 
} 

else if(scrolledFromtop > 600 && scrolledFromtop < 1000) // distance to trigger third background image 
{ 
$('html').removeClass('scrolled'); 
$('html').addClass('scrolledtwo'); 
} 

else{  
    ***$('html').removeClass('scrolled');*** 
    $('html').removeClass('scrolledtwo') 
} 
return false; 
});

來源

2017-05-25 11:52:41 Rajdeep

您的代碼工作正常。看一看。做一個長的頁面，你會看到效果。您已設置條件來更改背景圖像。

好的工作。

來源

2017-05-25 10:45:44

你必須嘗試這個樣子，這期間scroll添加了classes可能還需要在如下特定條件被刪除，

$(window).scroll(function() { 
 
    var fromTopPx = 200; // distance to trigger 
 
    var scrolledFromtop = $(window).scrollTop(); 
 
    if (scrolledFromtop > fromTopPx && scrolledFromtop <= 600) // distance to trigger second background image 
 
    { 
 
    $('html').addClass('scrolled'); 
 
    $('html').removeClass('scrolledtwo'); 
 
    } else if (scrolledFromtop >= 601 && scrolledFromtop < 1000) // distance to trigger third background image 
 
    { 
 
    $('html').addClass('scrolledtwo'); 
 
    $('html').removeClass('scrolled'); 
 
    } else { 
 
    $('html').removeClass('scrolled'); 
 
    $('html').removeClass('scrolledtwo') 
 
    } 
 
});

html { 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-attachment: fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
body { 
 
    height: 1200px; 
 
} 
 

 
html { 
 
    background-image: url("http://placehold.it/350x150/111/fff"); 
 
} 
 

 
html.scrolled { 
 
    background-image: url("http://placehold.it/350x150/f11/fff"); 
 
} 
 

 
html.scrolledtwo { 
 
    background-image: url("http://placehold.it/350x150/f2f/fff"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

刪除.scrolledtwo類時scrollTop介於200至600 ，同樣刪除.scrolled，當它在601到1000之間時，如果它交叉條件刪除兩者。

來源

2017-05-25 10:51:31 frnt

@Riya耆那教在中間它跳過添加和移除類，所以你需要的，如果條件除去它們，否則部分在它穿過1000的scrollTop之後播放。 – frnt

哦，是的！真是個錯誤。十分感謝你的幫助。像魅力一樣工作！ –

歡迎@RiyaJain :-) – frnt

背景圖片在滾動時不會改變，但滾動時效果不錯

回答

相關問題