仅当导航栏位于页面顶部时使其透明，然后在滚动时使其背景为纯背景

Make navbar transparent only when on top of the page and then plain background when scrolling

本文关键字：背景 然后 滚动 透明 顶部 于页面 导航      更新时间：2023-09-26

我知道有一些主题与制作透明导航栏有关，但答案并不像我预期的那样。

我想制作一个导航栏，其功能与此网站类似：http://themenectar.com/demo/salient-frostwave/

我的意思是，当栏位于页面顶部时，它将是透明的。只要向下滚动，它仍然会粘在顶部，但现在它有了可见的背景。

那么，如何处理HTML、CSS和JavaScript/jQuery的问题呢？

提前谢谢。

我认为应该使用opacity CSS属性。

您可以使用一个名为headroom.js的插件它非常易于使用和实现。

一旦导航栏或标题不再"粘"在页面顶部，你所要做的就是更改其背景色。

该插件也很轻，有vanilla js和jquery两种版本，甚至可以很容易地与angular一起使用。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('element here').css(css goes here );
   }
});
if($('html').offset().top) {
  //If on top
}

为了在页面顶部使其透明，它或多或少是这样的：

$(window).scroll(function(){
    if($("#nav-bar").scrollTop() == 0 && $("#nav-bar").css("opacity") != 1 ){
      $( "#nav-bar" ).css("opacity", 0.5);
    }else if( $("#nav-bar").scrollTop() != 0 && $("#nav-bar").css("opacity") != 0.5 ){
      $( "#nav-bar" ).css("opacity", 1);
    }
});
相关文章：