所以这就是我要做的事情,我在页面顶部有一个粘性导航,背景是透明的。但是当用户向下滚动并且内容位于导航下方时,我想要更改导航的背景,使其不透明。现在我已经实现了这一点,但我的问题是:用户是否可以滚动到页面顶部以使导航背景再次变为透明?
例如:用户加载页面,导航是透明的,用户向下滚动,导航背景变为非透明,然后用户滚动回页面顶部。是否有可能使导航背景再次变得透明? 另外我试图在不使用jquery的情况下实现这一点!所以请回答原始的javascript!
___JS___
window.onscroll = function nav_bg(){
var header = document.getElementById("header");
header.setAttribute('style','background-color:rgba(0,0,0,1);')
}
___CSS___
#header{background-color:rgba(0,0,0,.4);}
这是我当前的代码,但当用户滚动回到顶部时,背景保持不透明。
答案 0 :(得分:2)
这就是jQuery的用法:
var doc = document.documentElement, body = document.body;
var left = (doc && doc.scrollLeft || body && body.scrollLeft || 0);
var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
一旦你知道窗口滚动到哪里就只需要绑定到“scroll”事件(没有jQuery,绑定有点棘手,因为旧浏览器有不同的方法来处理事件绑定)
var addEvent = (function( window, document ) {
if ( document.addEventListener ) {
return function( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.addEventListener(type, cb, false );
}
else if ( elem && elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
else if ( document.attachEvent ) {
return function ( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );
}
else if ( elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
})( this, document );
// Example Usage
addEvent( window, 'scroll', function() {
//Test scroll position and set style
});
(这取自this page)