如何根据页面滚动使固定的导航栏透明？

Question

我希望mynavbar在页面滚动到顶部时是透明的，但是当用户滚动时，我希望它变得不透明。 我使用javascript进行了尝试，但是仍然无法正常工作。 http://jsfiddle.net/6A6qy/

 function myFunction() { if ($(window).scrollTop() < 50) { document.getElementById("masthead").style.opacity = "0.5"; } } 

 #masthead { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 50px; background-color: #00a087; opacity: 1; } #container { background-color: blue; height: 1000px; display: block; margin-top: -50px; } 

 <body onload="myFunction()"> <nav id="masthead"> <!-- Fixed navigation bar content --> </nav> <div id="container"></div> </body> 

Answer 1

这个怎么样：

JS：

// listen for scroll
$(window).scroll( function() {
  // apply css classes based on the situation
  if ($(".masthead").offset().top > 100) {
    $(".masthead").addClass("navbar-scrolled");
  } else {
    $(".masthead").removeClass("navbar-scrolled");
  }
}

CSS：

.navbar-scrolled {
  /* some css for navbar when scrolled */
}

JSFiddle示例： http : //jsfiddle.net/8ruwnaam/

然后，当然，您可以添加一些优化措施，以确保在类已经存在的情况下不会一直应用它们。 但是如果没有这样的东西，它也可以正常工作。

其他事项：

此答案的第一个版本和您的问题使用ID进行样式设置，对于许多人来说，这并不是一个好主意。 样式ID违背DRY原则，当您忘记考虑CSS特异性时，会引起所有这些有趣的小问题。 当涉及到JS中的逻辑之类的东西时，ID对于很多事情来说都还不错，但是请尝试使用类进行样式设计。

Answer 2

您应该创建一个.opaque css类，并根据活动滚动或scrollTop <50来附加它：

.opaque {
   opacity: 0.5;
}

然后将该类附加到on('scroll')或scrollTop （使用debounce插件 ）上：

function myFunction() {
  var $masthead = $('#masthead')
    , $window = $(window);
  // currently scrolling
  $window.scroll($.debounce( 250, true, function(){
    $masthead.addClass('opaque');
  }));
  // done scrolling
  $window.scroll($.debounce( 250, function(){
    // if at the top, add or keep opaque class
    if($(this).scrollTop() < 50) {
      if(!$masthead.hasClass('opaque')) {
         $masthead.addClass('opaque');
      }
    } else {
      $masthead.removeClass('opaque');
    }
  }));
}

Answer 3

您需要将其默认设置为透明（因为它将在顶部），像这样

#masthead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
  opacity: 0.5; /*edited the opacity to be 50% by default*/
}

然后使用此脚本来满足您的需求：

$(document).ready(function () {
    $(window).scroll(function(){
        var ScrollTop = parseInt($(window).scrollTop());

        if (ScrollTop < 100) {
            document.getElementById("masthead").style.opacity = "0.5";
        } else {
            document.getElementById("masthead").style.opacity = "1";
        }
    });
});