滚动时导航栏不透明度/rgba 更改答案

【问题标题】：navbar opacity/rgba change on scroll滚动时导航栏不透明度/rgba 更改
【发布时间】：2016-08-02 07:02:54
【问题描述】：

我一直在尝试创建一个顶部透明的导航，并在用户向下滚动页面时获得白色。我的标题高度是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")');

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

【问题讨论】：

这是一个重复的问题。请查看stackoverflow.com/questions/29646622/…
实际上不是。 stackoverflow.com/questions/29646622/…他询问如何添加或删除滚动的类，而我试图在滚动时编辑导航不透明度，有区别

标签： javascript jquery html css

【解决方案1】：

您使opacity 不是字符串，但变量navOpacity 变成了string。那是错误的。总的来说，其他一切都运行良好。 :)

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

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

Working example.

【讨论】：

【解决方案2】：

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

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

还请注意，您当前的逻辑与您描述的目标相反（标题开始透明并在 800 像素处变得不透明）并且逻辑也可以简化很多。试试这个：

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

Working example

【讨论】：

而opacity应该是一个字符串。
@RoryMcCrossan 感谢您的建议，但错误是，就像您说的那样，我没有使用不透明度作为字符串，而是使用我的变量名作为搅拌，这出错了，但在修复之后我的代码工作正常。

【解决方案3】：

或者，您可以使用 jquery 方法 .fadeTo() 而不是 css('opacity')。此方法平滑地为元素的不透明度设置动画。与即时不透明度更改相比，它更易于使用并且动画看起来非常漂亮。

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

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

【讨论】：