javascript - 在 Wordpress Genesis Framework 上向下滚动页面时向标题添加颜色

Question

我需要一些帮助。

的标题http://veritaswaste.com/waste/当用户向下滚动页面时，需要从空白/透明变为浅蓝色 (#C5D0DE)。

我不确定这是最好用 Javascript 还是用 CSS 来完成。

请有人帮助我。

谢谢你们。

Answer 1

在你的 javascript 中:

var _window = $(window),
header = $('.header'),
max = 1,
opacity = parseFloat(header.css('opacity')),
currentOpacity = opacity,
scrollPos = _window.scrollTop();

_window.scroll(function() {  
if (scrollPos < _window.scrollTop() ) {
    header.css('opacity', currentOpacity=currentOpacity+0.1);
} else if (scrollPos > _window.scrollTop() && currentOpacity > opacity) {
    header.css('opacity', currentOpacity=currentOpacity-0.1);
}

if (_window.scrollTop() == 0)
    header.css('opacity', opacity);

scrollPos = _window.scrollTop();
});

在你的标题中:

.header{
display:block;   
width:100%;
padding:10px 0;
background:red;
opacity:0;
position:fixed;
top:0;
left:0;
}

希望对您有所帮助!