Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Problema con .active

CSS - Problema con .active

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de thenewboy

Problema con .active

Publicado por thenewboy (2 intervenciones) el 13/05/2017 21:03:45
Saludos a todos,
Soy thenewboy, esta parece ser una gran pagina y me alegra ser parte de la comunidad,

Al lio, espero expresar mi problema de forma clara y concisa. Estoy empezando con el desarrollo web y tengo un problema con la class active.

Estoy desarrollando una web por medio de bootstrap, css y Jquery, es la primera que hago y me he quedado atascadisimo en un punto, creo que tengo el nav bien y todas las clases, el css tambien y los scripts tambien.
Lo pongo aqui porque creo que el problema es del css. Aunque nose si es el css o es el css cuando interactua con jQuery. Pero en teoria el nav deberia cambiar de color el
1
<a>
cuando llego a la altura de esa seccion, para indicar al usuario, que esta en la parte de la pagina correspondiente a ese
1
<li><a></li>
. ¿correcto? Pues no lo hace

Dejo aqui los 3 codigos, HTML, CSS y jQuery. Como ya dije la pagina tambien incluye bootstrap.

HTML con Bootstrap

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
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse menu">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
                <span class="sr-only">Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">web</a>
        </div>
 
        <!-- nav links -->
        <div class="collapse navbar-collapse navbar-right" id="navbar-1">
            <ul class="nav navbar-nav">
                <li><a href="index.html"> Inicio<span class="sr-only">(current)</span></a></li>
                <li><a href="#zona1">Zona 1</a></li>
                <li><a href="#zona2">Zona 2</a></li>
                <li><a href="#zona3">Zona 3</a></li>
                <li><a href="web.html">web</a></li>
                <li ><a href="#contact">Contacto</a></li>
             </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

CSS

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
30
31
32
33
34
35
36
37
.navbar { visibility: hidden;
      margin-bottom: 0;
      background-color: transparent;
      z-index: 9999;
      border: 0;
      font-size: 18px !important;
      line-height: 1.42857143 !important;
      letter-spacing: 2px;
      border-radius: 0;
      font-family: Montserrat, sans-serif;
      position: absolute;
      margin-bottom: 0;
      border-radius: 0;
        }
 
  .navbar li a, .navbar .navbar-brand {
      color: #000099 !important;

  }
 
    .navbar-nav li a:hover, .navbar-nav li .active a {
      color: #fff !important;

      background-color: #ff8c1a !important;

  }
 
//* Aqui va la clase que uso en el documento .js cuyo codigo esta debajo de este. creo que puede estar aqui el fallo, pero no lo resuelvo *//

 
.menu-fixed { visibility: visible;
    background-color: #f2f2f2;

    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    width:100%;
    box-shadow:0px 4px 3px rgba(0,0,0,.5);
    }
 
.menu-fixed ul li a { padding: 20px 20px; }

Como habreis visto, el navegador esta oculto, esto ocurre hasta que el user hacer scroll hasta una determinada cantidad de px

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var withClass = false;
jQuery(document).ready(function($){
	$(document).scroll(function(e){
		if($(window).scrollTop() >= ($("#z-part").height()*0.9)){
			if(!withClass){
				jQuery('.menu').addClass("menu-fixed");
				withClass = true;
			}
		}
		if($(window).scrollTop() < ($("#z-part").height()*0.9)){
			jQuery('.menu').removeClass("menu-fixed");
			withClass = false;
		}
	});
 
});

Vuelvo a repetir la pregunta.
¿¿¿Porque cuando el user ha llegado a la zona1 por ejemplo, o hago click en zona1 para ir hasta ella, no se pone la parte correspondiente a zona1 del menu o nav en color naranja, para indicar que esta activa???

De verdad que me trae de cabeza...

Gracias por vuestro tiempo
thenewboy
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
Imágen de perfil de [abZeroX]
Val: 78
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema con .active

Publicado por [abZeroX] (21 intervenciones) el 14/05/2017 04:19:13
Hola, en que parte registras el evento click ?
Para agregar la clase .active en los enlaces podrías utilizar el siguiente código:
1
2
3
4
5
6
7
$(document).ready(function($){
        $('.navbar-nav a').on('click', function(e) {
            e.preventDefault();
            $('.navbar-nav a.active').removeClass('active');
            $(this).addClass('active');
        });
    });

Nos comentas.
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 the

Problema con .active

Publicado por the (2 intervenciones) el 18/05/2017 18:26:19
Hola, perdon por la tardanza, pero no he podido contestar antes.
Debo ser sincero, mi pagina tiene 3 scripts y ese es el unico que yo no escribi, es copiado. Soy nuevo en esto y llevo poco tiempo con jQuery.
Lo aprendi hace unos meses y hasta hace poco no he podido ponerme con ello.
Cuando uso tu codigo no funciona, sino que deja de ser viable el que ya tengo, pues cuando clickeo en un a no me lleva a las id correpondientes, cosa que si hace si no añado el codigo.
En teoria debia funcionar, creo, te explico lo que yo entiendo en tu codigo, cuando el documento esta listo, creas la funcion($),
y en la linea de abajo dices que cuando alguien clickea sobre el elemento a, se ejecute la funcion e, que daria la clase active, pero si este la tiene, se la quita. creo...

Pero no ocurre nada.

Mi script es para que un menu que esta escondido hasta cierta atura, ocultando su visibilidad, pasa a ser visible, esta todo en la clase menu-fixed, pero no habla nada del evento click, ni de la clase active, tampoco dice que a determinada altura, se active un a, que corresponde qa la altura del scroll, estoy echo un lio, tremendo. Voy a explicarlo mas sencillo por aqui abajo.

En la web que enlazo abajo, el nav, se comporta como deberia hacerlo el mio, va activandose cuando clickeas o llegas a una seccion determinada.

Web ejemplo

pero uso el script para añadirle una clase que lo oculta hasta alcanzar un scroll determinado, el problema es que una vez puesto el script el nav pierde su comportamiento natural...

Vamos que la he liao parda jajajaja

Gracias por tu ayuda
Un saludo
Thenewboy
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