1

所以这就是我想要做的，我在页面顶部有一个粘性导航，背景是透明的。但是当用户向下滚动并且内容位于导航下方时，我想更改导航的背景，使其不透明。现在我已经实现了这一点，但我的问题是：当用户滚动回页面顶部时，导航背景是否可能再次变得透明？

例如：用户加载页面，导航是透明的，用户向下滚动，导航背景变为非透明，然后用户滚动回到页面顶部。是否可以让导航背景再次变得透明？我也试图在不使用 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);}

这是我当前的代码，但是当用户滚动回顶部时，背景保持不透明。

4

1 回答 1

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

一旦你知道窗口滚动到哪里，你只需要绑定到“滚动”事件（如果没有 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
});

（这是从这个页面获取的）

于 2013-01-29T18:32:03.380 回答