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

您可以通过在页面上的脚本块中添加此内容来调用它（at the bottom is best practice）：

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

Here is a fiddle demonstrating a working version

getScrollXY()功能的信用额转到：this site - function is at the bottom

Answer 2

使用纯css你将无法实现这种效果，但是通过使用jQuery来操作css然后就可以了。

<强>的jQuery

$(window).scroll(function() {
   $('#header_bar').css({opacity: 0});
});

JSFIDDLE

$(window).scroll(function() {
   $('#header_bar').animate({opacity: 0});
});

JSFIDDLE Fading out .animate

如果您希望它再次到达顶部后再回来，请告诉我！

淡入顶部（似乎淡入淡出）

$(window).scroll(function() {
   $('#header_bar').animate({opacity: 0});

   if ($(window).scrollTop() === 0) {
      $('#header_bar').animate({opacity: 1}); 
   }
});

JSFIDDLE fade in/out

隐藏和显示

$(window).scroll(function() {
   $('#header_bar').hide(500);

   if ($(window).scrollTop() === 0) {
      $('#header_bar').show(500); 
   }
});

JSFIDDLE show/hide

Answer 3

你不能只使用CSS，你需要JavaScript / jQuery。这里有一个jQuery代码片段，可以淡入淡出：

var opacity = 1;
var lastScrollTop = 0;
$(window).scroll(function(){
    var st = $(this).scrollTop();
    if(st == 0)
        $('#header_bar').css('opacity','1');

    if (opacity > 0.5 && (st > lastScrollTop)){
       $('#header_bar').css('opacity','-=0.01');
       opacity -= 0.01;
    }
    else if(opacity < 1)
    {
       $('#header_bar').css('opacity','+=0.01');
        opacity += 0.01;
    }
    lastScrollTop = st;
});

http://jsfiddle.net/LBHvD/

Answer 4

这对我很有用，您可以将fadeTo更改为动画并且效果一样好。

 var scroll_transparency = false;

 $(window).scroll(function() {

    // $('div.navbar-main-top').hide(500);

    if ($(window).scrollTop() == 0) {
        scroll_transparency = false;
        $('div.navbar-main-top').fadeTo( "fast", 1 );

    } else {
        if (scroll_transparency == false) {
            $('div.navbar-main-top').fadeTo( "fast", .9 );
            scroll_transparency = true;
        }
    }
});

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

4 个答案: