如何让顶栏在向下滚动时变得透明？

Question

现在我有一个位于顶部的栏,这里是CSS它:

#header_bar { 
  background: #000000;
  height: 60px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10020;
}

我的问题是,当页面滚动时,我如何使这个栏变得透明？

我应该以某种方式使用不透明度选项吗？

提前致谢!

Answer 1

我喜欢这里的JQuery解决方案,但为了完整性,希望包含一个JavaScript解决方案,以防有人在寻找它.

当导航栏不在顶部时,以下内容将淡化导航栏,并在导航栏返回时显示为纯色.

function fadeNav(){  
  var offset = getScrollXY();
  //if y offset is greater than 0, set opacity to desired value, otherwise set to 1
  offset[1] > 0 ? setNavOpacity(0.5) : setNavOpacity(1.0); 
}

function setNavOpacity(newOpacity){
  var navBar = document.getElementById("header_bar");
  navBar.style.opacity = newOpacity;
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
  //Netscape compliant
  scrOfY = window.pageYOffset;
  scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
  //DOM compliant
  scrOfY = document.body.scrollTop;
  scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft ||     
  document.documentElement.scrollTop ) ) {
  //IE6 standards compliant mode
  scrOfY = document.documentElement.scrollTop;
  scrOfX = document.documentElement.scrollLeft;
}

  return [ scrOfX, scrOfY ];
}

你可以通过在页面上的脚本块中添加它来调用它(在底部是最佳实践):

<script type="text/javascript">
  window.onscroll = fadeNav;
</script>

这是一个演示工作版本的小提琴

该getScrollXY()功能的功劳归结为:此站点 - 功能位于底部