CODEWITHSUNDEEP
jqueryhtmlcss
Andrew
Andrew

Reputation: 67

.fadeTo issues with jQuery on scroll

I’m trying to change the opacity of my navigation bar as I scroll past a div on my page. My code is below. To change the opacity, I’m trying to use jQuery’s .fadeTo method. I’m attempting to have it fade the opacity to 0.95 (from the 0.75 outlined in the CSS) after scrolling past the height of a flexible div with the class “splash”. What am I doing wrong? Is .fadeTo simply not compatible with this sort of technique? How could I implement this properly?

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

Upvotes: 0

Views: 110

Answers (2)

mertyildiran
mertyildiran

Reputation: 6613

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

More accurate, I think.

"splashHeight.top" is the trick.

Upvotes: 0

Moneer Kamal
Moneer Kamal

Reputation: 1877

you can do this

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

and in your 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;
    }

Upvotes: 1

Related Questions