entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

menu no se ajusta al clicar

Hola. Les comento un problemilla que me ha surgido y no consigo solucionarlo.
Tengo un menú que baja al hacer scroll. Esto lo hace perfectamente, le dejo el js para que lo vean:

$(document).ready(function(){

                    var altura = $(".header-top").offset().top; 

                    $(window).scroll(function(){

                          if($(window).scrollTop() >= altura){

                                $(".header-top").css("margin-top","0");
                                $(".header-top").css("position","fixed");

                          }else{

                                //$(".header-top").css("margin-top","100px");
                                //$(".header-top").css("position","static");

                          }

                    });

              });

Tuve que comentar las líneas del else por que me hacía cosas raras, y creo que no son necesarias,(no entiendo por que hace un margin-top de 100px, al hacer scroll hacía arriba por unos segundos descuadra todo, y deja un trozo en blanco arriba).
El problema me sale cuando al clicar a uno de los botones del menú y baja hasta la seccíon donde debe bajar, el menú baja de más. Con un par de imágenes me explicaré mejor.
enter image description here

y yo querría que quedase en esta posición:
enter image description here

Yo tengo el id donde comienza cada sección, por ejemplo:

    </div>
 </div>

 <div class="twitter" id="proyectos">
    <div class="container"> 
            <div class="portfolio_top">
                <div class="portfolio_left">
                  <h3 class="m_21">Proyectos</h3>
                  <div class="m_22"><span class="default_line"> </span></div>
                </div>

Vaya, que lo que querría que quedase en el id sería la parte inferior del menú, y no la parte superior, de esta manera no taparia parte de la sección al bajar.
A ver si me pueden ayudar. Gracias.

white comentado Feb 15, 2015

que estilos tiene .header-top? puedes agregar el html que contiene este elemento? y puedes agregar una pagina que represente tu error online? por ejemplo agregando tu código a jsfiddle?

3 Respuestas

3votos

ctapiamori Puntos1050

El problema esta por el posicionamiento de los objetos, tu asignación de referencia usando el #idreferencia esta bien implementado, lo que no estas considerando es que al menú le esta asignando el posicionamiento fixed, lo que lo hace un objeto flotante, y cuando el navegador ubica la referencia este se ubicara sobre el objeto, pero este no se visualiza porque el menú al ser flotante lo esta ocultando.
Lo que indico Leonardo-Tadei es justo lo que te indico, lo único es que tu no estas usando javascript para moverte hacia la ubicación, te recomendaría que tu menú siempre sea fixed y que a tus títulos le coloques un margin-top de la misma altura que tu menú, eso será lo más práctico.

3votos

Leonardo-Tadei Puntos223930

Hola @nachito777sk,

para que el desplazamiento del contenido te deje la página luego de la parte inferior del menú, en vez de por encima, tenés que sumar al desplazamiento el alto del menu.

No se ve en tu código, pero supongo que cada click hace un scrollTo() para mover el contenido a la posición del ID. Tenés que sumar a la posición el valor de $(".header-top").offset().top; para que baje un poco más.

Si nos ponés el código del JavaScript que hace el desplazamiento, seguro podremos darte más presiciones.

Saludos cordiales!

nachito777sk comentado Feb 15, 2015

Lo que hago es lo siguiente:
en el nav:

<div class="menu">
                <nav>
                    <ul>
                        <li><a href="#hello">Hello!!</a></li>
                        <li><a href="#lenguajes">Lenguajes</a></li>
                        <li><a href="#proyectos">Proyectos</a></li>
                        <li><a href="#sobre">Sobre mi</a></li>
                        <li><a href="#contact"></span>Contacto</a></li>
                    </ul>
                </nav>
            </div>

Los href hacen referencia a una parte de la página, y al clicar sobre uno de ellos, se desplaza hasta esa parte.
Miren esto que lo explica mejor, que yo me explico fatal.....

Si el destino es un elemento de una página web (por ejemplo, un párrafo en el interior de una página web), es necesario identificar de forma única el punto de destino mediante el atributo id.
En este caso, el atributo href contiene la dirección de la página, el carácter almohadilla (#) y el atributo id del destino. En caso de ser un enlace dentro de la misma página sólo se necesita el carácter almohadilla (#) y el atributo id del destino.

No he necesitado js....... lo que creo es que el contenedor del menu al bajar no ocupa espacio, por eso queda encima, y es por el static por lo que no ocupa el espacio que vemos. Esto son suposiciones mias, ya que cuando el menú no baja haciendo scroll queda perfecto, claro, el menú no esta y se ve lo que hay por detrás del menú.......
Igual no tiene solución esto........no se.

Leonardo-Tadei comentado Feb 15, 2015

Si no estás usando JavaScript para mover la página, estoy de acuerdo con la solución de @ctapiamori de agregarle un margin-top a cada sección al que apunta el HREF

Puede que la página te quede con más separación entre parte y parte de lo que pensaste en un principio, pero salvo que muevas con JavaScript el scroll, no hay otra manera.

nachito777sk comentado Feb 16, 2015

Probaré dandole más margin-top a ver que tal queda y barajaré la opción de hacerlo con javascript........
Muchísimas gracias por las respuestas.

1voto

alain barrios Puntos260

Dale un margin-top al elemento donde se va a dirigir el scroll y si es en jquery haces una animación de la propiedad scrollTop y que su valor sea el $("#proyectos").offset().top + 130

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta