2

现在我有一个位于顶部的栏，这是CSS它的：

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

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

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

提前致谢！

4

4 回答 4

5

我喜欢这里的 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()归于：此站点-功能位于底部

于 2013-10-30T12:42:02.523 回答
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/

于 2013-10-29T19:35:28.143 回答
3

使用纯 css 将无法实现此效果，但使用 jQuery 操作 css 则可以。

jQuery

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

JSFIDDLE

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

JSFIDDLE 淡出 .animate

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

在顶部淡入（似乎淡入非常缓慢）

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

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

JSFIDDLE 淡入/淡出

隐藏和显示

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

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

JSFIDDLE 显示/隐藏

于 2013-10-29T19:22:20.173 回答
1

这对我来说非常有用，您可以将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;
        }
    }
});
于 2014-02-06T05:09:39.077 回答