css - hacer - sticky header que es

Elemento de navegación pegajoso salta durante el desplazamiento

Question

En Firefox especialmente, me he encontrado con un problema que no logro resolver.

En la página siguiente, al desplazarse hacia abajo, la página salta varias veces, principalmente en pantallas más pequeñas donde la página no tiene su tamaño completo. Puede replicar este problema haciendo que su navegador sea más pequeño que la página, por lo que debe desplazarse.

Está en esta página: http://www.nucanoe.com/frontier-accessories/

Si deshabilito la position:fixed en el selector de navegación, soluciona el problema, pero necesitamos que la navegación sea adhesiva. ¿Hay una solución para arreglar esto? Estoy pensando que es posible que necesitemos usar jQuery de alguna manera.

¡Gracias por adelantado!

Answer 1

Debes tener un marcador de posición cuando tu navegación pase de relativa a fija. Por lo tanto, necesitas crear un nuevo div.

jQuery(".nav").wrap(''<div class="nav-placeholder"></div>'');
    jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());


    jQuery(".nav").wrapInner(''<div class="nav-inner"></div>'');

Recuerde cambiar ".nav", "nav-inner" y "nav-placeholder" a su gusto.

Para un navegador adhesivo completamente funcional, consulte mi sitio web: http://www.swegre.se/

Answer 2

Después de verte pedir ayuda en otra respuesta, intentaré explicarte más claramente.

El problema

Tu problema es cuando agregas position:fixed a la barra de navegación, la quita de su lugar y la pega en la parte superior de la página. Esta es la razón por la cual el resto de su contenido salta a la vista, porque la barra de navegación ya no está donde estaba.

Como arreglar

Puede evitar esto al envolver su elemento de navegación en un nuevo div -llamémoslo nav-wrapper- y establecer su altura al mismo que su elemento de navegación. Estos se conocen como elementos de marcador de posición. Este nuevo contenedor y tu barra de navegación original siempre deben tener la misma altura para que el ''salto'' desaparezca.

<div class="nav-wrapper" style="height:80px;"> <-- add this

    <div class="your-original-nav" style="height:80px"></div>

</div> <!-- add this

Ahora, cuando configura la barra de navegación como fixed y desaparece en la parte superior, la nueva envoltura que creamos con la misma altura mantiene el mismo contenido de la página. Cuando se ha eliminado la clase fija, vuelve a colocarse en el contenedor, sin empujar el contenido hacia abajo.

Una sugerencia

Según lo que puedo ver en su sitio, habrá una gran brecha en la barra de navegación hasta que la nueva navegación fija llegue a ese punto y lo cubra. Lo que quieres es un poco de jQuery para descubrir dónde hacer la navegación fija y dónde esconderla. Lo explicaré:

// cache the element
var $navBar = $(''.your-original-nav'');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass(''fixed'');
    } else {
        $navBar.removeClass(''fixed'');
    }

});

Es posible que desee agregar más funciones a este ejemplo, ya que es muy, muy básico. Es probable que desee recalcular las compensaciones en el cambio de tamaño de ventana como una adición.

Una demostración

Esta es una pequeña demostración que podría ayudarte : estaba aburrido y me sentí útil :)

Answer 3

Hecho de esta manera ahora: se agregó un elemento antes de la navegación:

<div class="nav-placeholder"></div>

Y el jquery:

<script type="text/javascript">
    $(document).on("scroll",function(){
        if($(document).scrollTop()>150){
            $(".nav-placeholder").height($(".nav").outerHeight());
        } else {
            $(".nav-placeholder").height(0);
        }
    });
</script>

Cuando me desplazo hacia abajo a 150, el marcador de posición obtiene la altura del navegador, cuando me desplazo hacia arriba de nuevo, configuro su altura en 0.

Aquí hay un violín: https://jsfiddle.net/herrfischerhamburg/562wu62y/