navbar不透明/ rgba滚动更改

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

<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不透明度为好。 Here`s的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")');

失败了，所以，我不得不问你也帮我

来源

2016-08-02 Liondj

这是一个重复的问题。请检查http://stackoverflow.com/questions/29646622/set-bootstrap-navbar-transparency-on-scroll –

它实际上不是。 http://stackoverflow.com/questions/29646622/set-bootstrap-navbar-transparency-on-scroll 他问如何添加或删除类滚动，而即时通讯试图编辑导航不透明时滚动，有差异 – Liondj

你hav e发opacity不是字符串，但变量navOpacity已成为string。那是错误的。其他一切工作正常。 :)

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

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

Working example.

来源

2016-08-02 07:10:58 eisbehr

谢谢，这解决了我的一半问题：D – Liondj

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

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

另外请注意，您目前的逻辑是倒退到你形容为你的目标（标题开始透明，并在800像素变得不透明）和逻辑也可以简化很多。试试这个：

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

Working example

来源

2016-08-02 07:15:43

而'opacity'应该是一个字符串。 – eisbehr

@eisbehr谢谢 –

@RoryMcCrossan感谢您的建议，但错误是，就像您所说的那样，我没有将不透明作为字符串使用，并将我的变量名用作stirng，并且出错了，但修复后我的代码正常工作。 – Liondj

或者，你可以使用jQuery方法.fadeTo()而不是css('opacity')。这种方法可以平滑地动画元素的不透明度。与即时不透明度变化相比，使用起来更容易，动画效果非常好。

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

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

来源

2016-08-02 07:20:55

navbar不透明/ rgba滚动更改

回答

相关问题