Question

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

＆＃13;

$(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);
    };
  });
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

我认为更准确。

＆＃34; splashHeight.top＆＃34;是诀窍。

.fadeTo问题滚动jQuery

2 个答案: