Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Cómo cambiar mi nav al hacer scroll

CSS - Cómo cambiar mi nav al hacer scroll

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Alejo Mad Major
Val: 1
Ha disminuido su posición en 19 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: 5
Ha aumentado su posición en 10 puestos 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

Cómo cambiar mi nav al hacer scroll

Publicado por Nelson Larenas (1 intervención) el 17/08/2020 18:23:54
Pero esto no es lo que está pidiendo el amigo, se trata de cambiar la clase del elemento, y el ejemplo de arriba sirve y se puede mejorar si tienes nociones de JS
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