Question

我希望mynavbar在页面滚动到顶部时是透明的，但是当用户滚动时我希望它变得不透明。我用javascript尝试了这个，但是仍然没有工作。 http://jsfiddle.net/6A6qy/

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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是否＆lt; 50：

.opaque {
   opacity: 0.5;
}

然后附上该课程on('scroll')或scrollTop（这是使用the debounce plugin）：

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";
        }
    });
});

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

3 个答案: