.fadeTo 在滚动时出现 jQuery 问题答案

【问题标题】：.fadeTo issues with jQuery on scroll.fadeTo 在滚动时出现 jQuery 问题
【发布时间】：2015-02-01 07:50:03
【问题描述】：

当我滚动浏览页面上的一个 div 时，我正在尝试更改导航栏的不透明度。我的代码如下。为了改变不透明度，我尝试使用 jQuery 的 .fadeTo 方法。在滚动超过具有类“splash”的灵活 div 的高度后，我试图让它的不透明度降低到 0.95（从 CSS 中概述的 0.75）。我究竟做错了什么？ .fadeTo 与这种技术根本不兼容吗？我怎样才能正确实施呢？

$(document).ready(function() {
  $(window).scroll(function() {
    var y = $(window).scrollTop();
    var splashHeight = $("div.one").height();
    if (y > splashHeight) {
      $("nav").fadeTo("500", 0.95);
    } else {
      $("nav").fadeTo("500", 0.75);
    };
  });
})

nav {
  width: 100%;
  position: fixed;
  height: 50px;
  top: 0px;
  left: 0px;
  background-color: white;
  opacity: 0.75;
  z-index: 1000;
}
nav ul {
  display: block;
  list-style: none;
  text-align: center;
  position: relative;
  margin: 10px auto 0 auto;
  width: 500px;
}
nav ul li {
  display: inline;
  width: 150px;
  font-family: "Montserrat", sans-serif;
  padding: 0 20px;
  font-size: 18px;
  text-align: center;
}
nav ul li a {
  transition: all 0.6s ease;
  color: #008040;
}
nav ul li a:hover {
  color: black;
}
nav ul li.active {
  cursor: default;
}
div.splash {
  height: 100%;
  width: 100%;
  z-index: 1;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  opacity: 0.75;
}

<html>

<head>

  <title>DragonTech &mdash; Home</title>

  <link href="css/foundation.min.css" rel="stylesheet" type="text/css" />
  <link href="css/animate.css" rel="stylesheet" type="text/css" />
  <link href="css/normalize.css" rel="stylesheet" type="text/css" />
  <link href="css/app.css" rel="stylesheet" type="text/css" />

  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.ui.min.js"></script>
  <script src="js/app.js"></script>

</head>

<body>

  <nav>
    <ul>
      <li class="active">Home</li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Appointment</a>
      </li>
    </ul>
  </nav>

  <div class="splash one">
  </div>

</body>

</html>

【问题讨论】：

标签： jquery html css

【解决方案1】：

你可以这样做

 $(document).ready(function() {
  $(window).scroll(function() {
    var y = $(window).scrollTop();
    var splashHeight = $("div.one").height();
    if (y > splashHeight) {
      $("nav").css("opacity", '0.95');
    } else {
      $("nav").css("opacity", '0.75');
    };
  });
})

在你的 CSS 中

  nav {
      width: 100%;
      position: fixed;
      height: 50px;
      top: 0px;
      left: 0px;
      background-color: white;
      opacity: 0.75;
      z-index: 1000;
transition: all 0.5s ease;
    }

【讨论】：

完美运行！谢谢！

【解决方案2】：

$(document).ready(function() {
  $(window).scroll(function() {
    var y = $(window).scrollTop();
    var splashHeight = $("div.one").position();
      console.log(y)
      console.log(splashHeight.top)
    if (y > splashHeight.top) {
      $("nav").fadeTo("500", 0.50);
    } else {
      $("nav").fadeTo("500", 0.75);
    };
  });
})

我认为更准确。

“splashHeight.top”是诀窍。

【讨论】：