Question

我正在尝试使用导航栏创建和效果。现在我有一张封面照片覆盖整个页面，滚动时会产生一个视差效果，显示页面内容。我希望导航栏在向下滚动时降低不透明度，仍然保持静态，一旦封面照片完全滚动并且内容覆盖整个页面，导航栏（几乎看起来也不同）淡入并保持静止再次。不幸的是我找不到要展示的示例网站。如果有人可以帮助解决这个问题，我将不胜感激。这是我到目前为止所做的。

＆＃13;

$(document).on('scroll', function(e) {
  $('#nav').css('opacity', ($(document).scrollTop() / 50000));
  var st = $(window).scrollTop();


  $('header').css({
    'background-position-y': 0 + (st * .77) + "px"
  });
});

＆＃13;

body {
  margin: 0;
  background: #F9F9F9;
}
#page-wrap {
  position: relative;
  min-width: 1366px;
  max-width: 2048px;
  margin: 0px auto;
  width: 100%;
}
header {
  background: url('../images/cover6.jpg') no-repeat;
  background-size: 100% 100%;
  width: 95%;
  margin: 0px auto;
  height: 1000px;
}
.nav_container {
  margin: 0 auto;
  width: 100%;
}
.nav_container nav {
  display: inline-block;
  position: fixed;
  background: #fff;
  width: 2048px;
  height: 85px;
  opacity: 0;
}

＆＃13;

<div id="page-wrap">
  <header>
    <div class="nav_container">
      <nav id="nav">Nav</nav>
    </div>
  </header>
  <div id="main">CONTENT</div>
</div>

＆＃13;

Answer 1

以下是您可以根据自己的喜好进行修改的示例。

jsFiddle Demo

<强> HTML：

<div id="bg"></div><!-- background image, allows opacity -->
<div class="nav_container">
    <nav id="nav">The NAV menu goes here and is rather wide</nav>
</div>
<div id="page-wrap">
    <div id="main">CONTENT</div>
</div>

<强> CSS：

#bg{position:fixed;top:0;left:0;width:100%;height:100%;background-image:url('http://placekitten.com/g/300/200');background-size:cover;opacity:0.3;}
#page-wrap{position:relative;width:100%;height:1500px;}
#main{height:1500px;width:80%;margin:0 auto;text-align:center;padding-top:200px;color:blue;}
.nav_container {position:fixed;left:0;bottom:0;width:100%;height:85px;}
#nav {width:100%;height:100%;text-align:center;color:yellow;font-size:2em;text-shadow:1px 1px 5px black;background:url(http://placekitten.com/g/500/80);}

<强> jQuery的：

$(document).on('scroll', function (e) {

    var xx = 1 - ($(window).scrollTop() / 500);
    if (xx > 0) $('.nav_container').css('opacity', xx);
    else $('.nav_container').css('opacity', 1);

});

导航栏淡出并返回

1 个答案: