Question

我一直在尝试创建一个在顶部透明的导航，并在用户向下滚动页面时获得白色。我的标题高度为800px，我希望我的导航在800px之后失去100％的透明度。这是我的代码：

<header id="header">
   <nav class="navbar">
       <ul class="navigation">
           <li><a href="#header">Home</a></li>
           <li><a href="">About us</a></li>
           <li><a href="">Our qualities</a></li>
           <li><a href="">Contact us</a></li>
           <li><a href="">contact us</a></li>
       </ul>
   </nav>

nav  {
    width: 1600px;
    position: fixed;
    top: 0; 

    ul {
        margin: 0 auto;

        li {
            display: inline-block;
            padding: 5px 20px;

            a {
                font-family:  $f1;
                font-size: 16pt;
                color: $c3;
            }
        }
    }
}
}

首先我尝试使用不透明度，但它不起作用，除此之外，元素（ul和li）的不透明度也为0。这是JS的原因：

jQuery(document).ready( function() {        
    var navOffset = jQuery("nav").offset().top;

    jQuery(window).scroll(function() {
        var scrollPos = jQuery(window).scrollTop();
        var navOpacity = scrollPos /800;
        jQuery('.navbar').css(opacity, 'navOpacity');

        if (jQuery('nav').css('opacity') < 1) {
            jQuery('.navigation').css('opacity', '1')  
        };

然后我尝试在滚动时更改RGBA值，这也不起作用而不是

jQuery('.navbar').css( opacity, 'navOpacity' );

我用过

jQuery('.navbar').css(backgroundcolor, 'rgba (255, 255, 255, + "navOpacity")');

那也失败了，所以，我不得不请你帮助我

Answer 1

您已将opacity设为字符串，但变量navOpacity已成为string。那是错的。其他一切工作正常。：）

// change
$('.navbar').css(opacity, "navOpacity");

// to
$('.navbar').css("opacity", navOpacity);

<强> Working example.

Answer 2

您的代码中的问题是，您将navOpacity作为字符串提供给css()，而不是变量本身。试试这个：

$('.navbar').css('opacity', navOpacity);

另请注意，您当前的逻辑是向后描述的目标（标题开始透明，在800px时变得不透明），逻辑也可以简化很多。试试这个：

$(window).scroll(function() {
    var pc = $(this).scrollTop() / 800;
    $('.navbar').css('opacity', 1 - pc);
});

Working example

Answer 3

或者，您可以使用jquery方法.fadeTo()代替css('opacity')。该方法可以平滑地激活元素的不透明度。与即时不透明度变化相比，它更易于使用，动画效果非常好。

jQuery('.navbar').fadeTo( "slow" , navOpacity);

if (jQuery('nav').css('opacity') < 1) {
  jQuery('.navigation').fadeTo( "slow" , 1);
};

navbar opacity / rgba更改滚动

3 个答案: