¿Cómo hacer un menu fixed que cambie sus propiedades según el offset de las secciones?

publicado por: Anonymous

Mi pregunta mas especifica es, ¿Cómo puedo hacer que mi menú tenga varios colores, según el tope de mis secciones, pues, sé cómo hacerlo, pero no puedo hacer que vuelva a los colores que tenía anteriormente. A continuación les dejaré mi método. Al yo colocar el siguiente código, el <nav> debe de cambiar de color background según la sección de la página, pero no puedo hacer que cambie a los colores anteriores al volver a desplazar hacia arriba ni con else. Solo se queda el último cambio de color.

_x000D_

_x000D_

$(document).ready(function() {_x000D_
_x000D_
  var altura = 200;_x000D_
  var section2 = $("#section2").offset().top;_x000D_
  var section3 = $("#section3").offset().top;_x000D_
  var section4 = $("#section4").offset().top_x000D_
_x000D_
  $(window).scroll(function() {_x000D_
_x000D_
    if($(window).scrollTop() >= altura){_x000D_
_x000D_
      $("nav").css({"margin-top": "0px"});_x000D_
      $("header").css({"margin-top": "-100px"});_x000D_
      $(".hero").css({"margin": "90px auto"});_x000D_
      $(".hero").css({"background-color": "#D9D5CC"});_x000D_
      $(".hola").css({"margin-top": "90px"});_x000D_
_x000D_
    }else{_x000D_
_x000D_
      $("nav").css({"margin-top": "100px"});_x000D_
      $("header").css({"margin-top": "0px"});_x000D_
      $(".hero").css({"margin": "200px auto"});_x000D_
      $(".hero").css({"background-color": "rgba(0, 0, 0, 0)"});_x000D_
      $(".hola").css({"margin-top": "200px"});_x000D_
_x000D_
    }_x000D_
_x000D_
  });_x000D_
_x000D_
  $(window).scroll(function() {_x000D_
_x000D_
    if($(window).scrollTop() >= section2){_x000D_
_x000D_
      $("nav").css({"background-color": "#F2CF63"});_x000D_
_x000D_
    }else{_x000D_
_x000D_
      $("nav").css({"background-color": "#57385C"});_x000D_
_x000D_
    }_x000D_
_x000D_
  });_x000D_
  _x000D_
    $(window).scroll(function() {_x000D_
_x000D_
    if($(window).scrollTop() >= section3){_x000D_
_x000D_
      $("nav").css({"background-color": "#F2CEF7"});_x000D_
_x000D_
    }else{_x000D_
_x000D_
      $("nav").css({"background-color": "#F2CF63"});_x000D_
_x000D_
    }_x000D_
_x000D_
  });_x000D_
  _x000D_
  $(window).scroll(function() {_x000D_
_x000D_
    if($(window).scrollTop() >= section4){_x000D_
_x000D_
      $("nav").css({"background-color": "#F22E57"});_x000D_
_x000D_
    }else{_x000D_
_x000D_
      $("nav").css({"background-color": "#F2CEF7"});_x000D_
_x000D_
    }_x000D_
_x000D_
  });_x000D_
_x000D_
  $(".inicio").click(function() {_x000D_
_x000D_
    $("html, body").animate({scrollTop: $("#section").offset().top} , 500);_x000D_
_x000D_
  });_x000D_
_x000D_
  $(".nosotros").click(function() {_x000D_
_x000D_
    $("html, body").animate({scrollTop: $("#section2").offset().top}, 500);_x000D_
_x000D_
  });_x000D_
_x000D_
  $(".trabajos").click(function() {_x000D_
_x000D_
    $("html, body").animate({scrollTop: $("#section3").offset().top}, 500);_x000D_
_x000D_
  });_x000D_
_x000D_
  $(".contacto").click(function() {_x000D_
_x000D_
    $("html, body").animate({scrollTop: $("#section4").offset().top}, 500);_x000D_
_x000D_
  });_x000D_
_x000D_
});

_x000D_

* {_x000D_
  font-family: sans-serif;_x000D_
  padding: 0;_x000D_
  margin: 0;_x000D_
}_x000D_
_x000D_
header {_x000D_
  width: 100%;_x000D_
  height: 100px;_x000D_
  text-align: center;_x000D_
  position: fixed;_x000D_
  background-color: #A75265;_x000D_
  z-index: 5;_x000D_
  -webkit-transition: .5s;_x000D_
  transition: .5s;_x000D_
}_x000D_
_x000D_
header h1 {_x000D_
  color: #EC7263;_x000D_
  display: inline-block;_x000D_
  margin-top: 20px;_x000D_
  text-transform: uppercase;_x000D_
}_x000D_
_x000D_
header h4 {_x000D_
  color: #FFEDBC;_x000D_
  margin-top: 2px;_x000D_
  display: block;_x000D_
  text-transform: uppercase;_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
nav {_x000D_
  width: 100%;_x000D_
  height: 50px;_x000D_
  text-align: center;_x000D_
  background-color: #57385C;_x000D_
  position: fixed;_x000D_
  z-index: 5;_x000D_
  margin-top: 100px;_x000D_
  -webkit-transition: .5s;_x000D_
  transition: .5s;_x000D_
}_x000D_
_x000D_
nav ul {_x000D_
  list-style: none;_x000D_
}_x000D_
_x000D_
nav ul li {_x000D_
  display: inline-block;_x000D_
}_x000D_
_x000D_
nav ul li a {_x000D_
  text-decoration: none;_x000D_
  color: #A75265;_x000D_
  text-transform: uppercase;_x000D_
  padding-left: 20px;_x000D_
  padding-right: 20px;_x000D_
  padding-bottom: 16px;_x000D_
  padding-top: 16px;_x000D_
  display: block;_x000D_
  font-weight: 700;_x000D_
}_x000D_
_x000D_
nav ul li a:hover {_x000D_
  color: #57385C;_x000D_
  background-color: #A75265;_x000D_
  font-weight: 700;_x000D_
  -webkit-transition: .2s;_x000D_
  transition: .2s;_x000D_
}_x000D_
_x000D_
#section {_x000D_
  width: 100%;_x000D_
  padding-top: 150px;_x000D_
  height: 900px;_x000D_
  background-color: #F2F2DF;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
section h1 {_x000D_
  text-align: center;_x000D_
  color: rgba(217, 213, 204, 0.8);_x000D_
  font-size: 70px;_x000D_
  font-weight: 600;_x000D_
  margin-top: 200px;_x000D_
  text-shadow: 1px 4px 6px #F2F2DF, 0 0 0 #000, 1px 4px 6px #F2F2DF;_x000D_
  -webkit-transition: .5s;_x000D_
  transition: .5s;_x000D_
}_x000D_
_x000D_
.hero {_x000D_
  width: 850px;_x000D_
  height: 700px;_x000D_
  background-color: rgba(0, 0, 0, 0);_x000D_
  margin: 200px auto;_x000D_
  -webkit-transition: .5s;_x000D_
  transition: .5s;_x000D_
}_x000D_
_x000D_
#section2 {_x000D_
  width: 100%;_x000D_
  padding-top: 150px;_x000D_
  height: 900px;_x000D_
  background-color: #5A8C81;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
#section3 {_x000D_
  width: 100%;_x000D_
  padding-top: 150px;_x000D_
  height: 900px;_x000D_
  background-color: #765783;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
#section4 {_x000D_
  width: 100%;_x000D_
  padding-top: 150px;_x000D_
  height: 900px;_x000D_
  background-color: #86B5A8;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
_x000D_
.antefooter {_x000D_
  height: 90px;_x000D_
  width: 100%;_x000D_
  background-color: #B17178;_x000D_
}_x000D_
_x000D_
footer {_x000D_
  height: 100px;_x000D_
  width: 100%;_x000D_
  background-color: #36282B;_x000D_
  text-align: center;_x000D_
  display: block;_x000D_
}_x000D_
_x000D_
footer p {_x000D_
  color: #F2F2DF;_x000D_
  padding-top: 45px;_x000D_
  display: block;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">_x000D_
    <meta name="viewport" content="width=divice-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">_x000D_
    <title>Miguel Rangel</title>_x000D_
    <link rel="stylesheet" href="./css/master.css">_x000D_
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
    <script type="text/javascript" src="./js/master.js">_x000D_
_x000D_
    </script>_x000D_
  <style type="text/css">/* This is not a zero-length file! */_x000D_
  </style><style type="text/css">/* This is not a zero-length file! */</style>_x000D_
</head>_x000D_
  <body>_x000D_
    <header>_x000D_
      <h1>Crawford</h1>_x000D_
      <h4>Diseño</h4>_x000D_
    </header>_x000D_
    <nav id="nav1">_x000D_
      <ul>_x000D_
        <li><a class="inicio" href="#section">Inicio</a></li><li>_x000D_
        <a class="nosotros" href="#section2">Nosotros</a></li><li>_x000D_
        <a class="trabajos" href="#section3">Trabajos</a></li><li>_x000D_
        <a class="contacto" href="#section4">Contacto</a></li>_x000D_
      </ul>_x000D_
    </nav>_x000D_
    <section id="section">_x000D_
      <h1 class="hola">HOLA</h1>_x000D_
      <div class="hero">_x000D_
_x000D_
      </div>_x000D_
    </section>_x000D_
    <section id="section2">_x000D_
_x000D_
    </section>_x000D_
    <section id="section3">_x000D_
_x000D_
    </section>_x000D_
    <section id="section4">_x000D_
_x000D_
    </section>_x000D_
    <div class="antefooter">_x000D_
_x000D_
    </div>_x000D_
    <footer><p>Copyright (c) 2017 Copyright <strong>MIGUEL</strong> All Rights Reserved.</p></footer>_x000D_
  </body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

solo no metas la condicion else en tus comparaciones, el sistema asume cual es la última regla cumplida.

Toma en cuenta que solo el último valor asignado, es el que se queda como ajuste en el CSS.

Aquí te dejo el demo funcionando:

https://jsfiddle.net/L7owv17v/

Y aquí el código JS:

$(document).ready(function () {

  var altura = 200;
  var section2 = $("#section2").offset().top;
  var section3 = $("#section3").offset().top;
  var section4 = $("#section4").offset().top;

  $(window).scroll(function () {
    if ($(window).scrollTop() >= altura) {
      $("nav").css({"margin-top": "0px"});
      $("header").css({"margin-top": "-100px"});

      $(".hero").css({
        "margin": "90px auto",
        "background-color": "#D9D5CC",
        "margin-top": "90px"
      });
    } else {
      $("nav").css({"margin-top": "100px"});
      $("header").css({"margin-top": "0px"});
      $(".hero").css({
        "margin": "200px auto",
        "background-color": "rgba(0, 0, 0, 0)",
        "margin-top": "200px"
      });
    }


    if ($(window).scrollTop() < section2) {
      $("nav").css({"background-color": "#57385C"});
    }

    if ($(window).scrollTop() >= section2) {
      $("nav").css({"background-color": "#F2CF63"});
    }

    if ($(window).scrollTop() >= section3) {
      $("nav").css({"background-color": "#F2CEF7"});
    }

    if ($(window).scrollTop() >= section4) {
      $("nav").css({"background-color": "#F22E57"});
    }
  });


  $(".inicio").click(function () {
    $("html, body").animate({scrollTop: $("#section").offset().top}, 500);
  });

  $(".nosotros").click(function () {
    $("html, body").animate({scrollTop: $("#section2").offset().top}, 500);
  });

  $(".trabajos").click(function () {
    $("html, body").animate({scrollTop: $("#section3").offset().top}, 500);
  });

  $(".contacto").click(function () {
    $("html, body").animate({scrollTop: $("#section4").offset().top}, 500);
  });
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *