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;
}

希望有所帮助！

Answer 2

这是一项JavaScript工作。假设您可以使用jQuery，这里是一个JSFiddle：http://jsfiddle.net/Gy2wW/

基本上，有3个步骤。首先挂钩$(window).scroll。然后获取相对于窗口的当前滚动位置并除以（$(document).scrollTop() / $(document).height();位）。然后使用$("#header").css('opacity',newOpacityValue);

应用于标题

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

2 个答案: