從頂部滾動之後更改元素樣式

我試圖在從頂部向下滾動時向標題應用不同的樣式。基本上我希望它，如果你在頂部滾動然後應用樣式1，但如果你沒有在頂部滾動然後應用樣式2.從頂部滾動之後更改元素樣式

我試過使用一段時間和for循環來實現這一點，但兩者失敗。下面的jQuery示例確實有效，但由於某種原因，不適用於此示例。不過，自從我學習JavaScript以來，我寧願使用JavaScript而不是jQuery。

有人可以告訴我我應該使用什麼：一段時間或if語句？有人能告訴我我的嘗試做錯了什麼嗎？

感謝您的任何幫助。

// ATTEMPT 1 
 

 
var headerWrap = document.getElementById('header-wrap'); 
 
var h = headerWrap.scrollTop; 
 

 
function changeHeaderOpacity() { 
 
    "use strict"; // wtf is this? 
 
    while (h > 0) { 
 
     headerWrap.addClass('scroll-opacity-change'); 
 
    } 
 
    headerWrap.removeClass('scroll-opacity-change'); 
 
} 
 

 
// ATTEMPT 2 
 

 
/* 
 
var headerWrap = $('#header-wrap'); 
 
$(window).scroll(function() { 
 
    headerWrap.addClass('scroll-opacity-change'); 
 
    if($(this).scrollTop() <= 0) { 
 
     headerWrap.removeClass('scroll-opacity-change'); 
 
    } 
 
}); 
 
*/ 
 
/* 
 

 
// ATTEMPT 3 
 

 
var headerWrap = document.getElementById('header-wrap'); 
 
var h = headerWrap.scrollTop; 
 

 
function changeHeaderOpacity() { 
 
    "use strict"; // wtf is this? 
 
    if (h > 0) { 
 
     headerWrap.addClass('scroll-opacity-change'); 
 
    } else { 
 
    headerWrap.removeClass('scroll-opacity-change'); 
 
    } 
 
} 
 
*/

body{ 
 
    height:1000px; 
 
} 
 

 
#header-wrap{ 
 
    height:100px; 
 
    width:100%; 
 
    background:#0f0; 
 
} 
 

 
.scroll-opacity-change{ 
 
    background:#f00; 
 
}

<div id="header-wrap"> 
 

 
</div>

來源

2017-05-06 user3760941

jQuery的例子沒有爲你的榜樣工作，因爲[CSS特異性（的https://developer.mozilla.org/en-US/docs /網絡/ CSS /特異性）。即使將'.scroll-opacity-change'類添加到元素，'＃header-wrap'中的背景也會始終獲勝。 – IronGeek

那麼首先，你需要添加監聽器來檢測窗口滾動。

$(document).ready(function() { 
$(window).scroll(function() { 
    //do the header styling using .style 
    }); 
});

現在你需要存儲滾動日誌中的幾個變量要弄清楚你是向下滾動與否，你可以用下面這樣的：

var currentScroll = window.pageYOffset || document.documentElement.scrollTop; 
    if (currentScroll > lastScrollTop){ 
     // You are down scrolling 
    } else { 
     // You are up scrolling 
    } 
    previousScroll = currentScroll;

最終代碼：

$(document).ready(function() { 
previousScroll=0 //this means we are starting from top 
$(window).scroll(function() { 
    var currentScroll = window.pageYOffset || document.documentElement.scrollTop; 
if (currentScroll > previousScroll){ 
    // Change header style cause you are down scrolling 
} else { 
    // Do something else? You are up scrolling anyway... 
} 
previousScroll = currentScroll; 
); 
});

我希望這有助於您的意見。

來源

2017-05-06 13:48:48

使用class而不是id;

<div class="header-wrap"> 

</div>

和

$(window).scroll(function() { 
    $('.header-wrap').addClass('scroll-opacity-change');  
    if($(this).scrollTop() <= 0) { 
     $('.header-wrap').removeClass('scroll-opacity-change'); 
    } 
});

來源

2017-05-06 14:05:56 pheaselegen

從頂部滾動之後更改元素樣式

回答

相關問題