CSS - Cómo cambiar mi nav al hacer scroll

 
Vista:
Imágen de perfil de Alejo Mad Major
Val: 2
Ha disminuido su posición en 9 puestos en CSS (en relación al último mes)
Gráfica de CSS

Cómo cambiar mi nav al hacer scroll

Publicado por Alejo Mad Major (1 intervención) el 04/09/2019 23:23:41
Hola mi pregunta está en que quiero hacer que en mi página cuando baje con la ruedita del mouse mi header cambie, específicamente, en mi header, tengo mi logo y el nav, lo que quiero es que al hacer scroll hacia abajo, el logo desaparezca y el fondo del nav cambie y quede arriba.
éste es el código de html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<header id="header">
        <div class="header-top">
            <div class="container">
                <div>
                  <div id="logo">
                    <a href="index.html"><img src="#"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="container main-menu">
        <div>
            <nav id="nav-menu-container">
                <ul class="nav-menu">
                    <li><a href="index.html">Inicio</a></li>
                    <li class="menu-has-children"><a href="">Servicios</a>
                        <ul>
                            <li><a href="#">Ser1</a></li>
                            <li><a href="#">Ser2</a></li>
                            <li><a href="#">Ser3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Zona Clientes</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav><!-- #nav-menu-container -->
        </div>
    </div>
</header>
éste es el código css que quiero agregar cuando se haga el scroll, en el nav pero no sé cómo hacer eso :c
1
2
3
4
5
6
7
8
9
10
11
12
13
#header.header-scrolled {
	transition: all 0.5s;
	background-color: rgba(34, 34, 34, 0.9);
}
 
#header.header-scrolled .header-top {
	display: none;
}
 
#header.header-scrolled .main-menu {
	background: transparent;
	border: none;
}
O no se si tengo que usar javascript, realmente no hay problema solo quiero lograr eso en mi página jaja

yo tenía éste código de js también, pero no funciona :v
1
2
3
4
5
6
7
$(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('#header').addClass('header-scrolled');
        } else {
            $('#header').removeClass('header-scrolled');
        }
    });
ME PODRÍAN AYUDAR PORFAVOR C:
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 8
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Cómo cambiar mi nav al hacer scroll

Publicado por Webmaster (3 intervenciones) el 12/09/2019 21:29:32
Hola amigo, eso es muy simple con pocas lineas de css y js

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<header id="header">
        <div class="header-top">
            <div class="container">
                <div>
                  <div id="logo">
                    <a href="index.html"><img src="lwp.png"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="container main-menu">
        <div>
            <nav id="nav-menu-container">
                <ul class="nav-menu">
                    <li><a href="index.html">Inicio</a></li>
                    <li class="menu-has-children"><a href="">Servicios</a>
                        <ul>
                            <li><a href="#">Ser1</a></li>
                            <li><a href="#">Ser2</a></li>
                            <li><a href="#">Ser3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Zona Clientes</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav><!-- #nav-menu-container -->
        </div>
    </div>
</header>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
	#header{
    position: fixed;
    top: 0;
    left: 0;
  }
  .logoOnOff{
    opacity: 0;
    height: 0;
    transition: all .35s ease-in-out
  }
  .bgcolor{
    background-color: red;
    transition: all .35s ease-in-out
  }

JS
llamamos a la libreria
1
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
    var $cabecera = $('#header');
    var $logo = $('#logo');
    var previousScroll = 0;
    $(window).scroll(function(event){
       var scroll = $(this).scrollTop();
       if (scroll > previousScroll && scroll > 200){
           $logo.addClass('logoOnOff');
           $cabecera.addClass('bgcolor');
       } else {
          $logo.removeClass('logoOnOff');
           $cabecera.removeClass('bgcolor');
       }
       previousScroll = scroll;    });
 
  });

Usamos opacity y height para que tenga efecto la animación, si utilizmos display none, funciona pero no con el mismo efecto de transición

Espero te sirva

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 404
Plata
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Cómo cambiar mi nav al hacer scroll

Publicado por ScriptShow (97 intervenciones) el 12/09/2019 21:40:28
Saludos Alejo,

cosas parecidas, las complican mucho, demasiado. Son muy sencillas:

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

https://www.w3schools.com/howto/howto_js_sticky_header.asp

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar