Question

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.

y yo querría que quedase en esta posición:

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.

Comments

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?

Answer 1

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.

Answer 2

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!

Answer 3

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