L'elemento di navigazione appiccicoso salta durante lo scorrimento

Question

In Firefox, in particolare, ho riscontrato un problema che non riesco a capire come risolvere.

Nella pagina successiva, quando si scorre la pagina verso il basso si salta più volte, principalmente su schermi più piccoli in cui la pagina non ha le dimensioni complete visualizzate. È possibile replicare questo problema rendendo il browser più piccolo della pagina, quindi è necessario scorrere.

E 'in questa pagina: http://www.nucanoe.com/frontier-accessories/

Se rendo invalido il position:fixed sul selettore di navigazione, si risolve il problema - ma abbiamo bisogno della navigazione per essere appiccicoso. C'è una soluzione per risolvere questo problema? Penso che potremmo aver bisogno di usare jQuery in qualche modo.

Grazie in anticipo!

Answer 1

Dopo aver visto che ti chiede aiuto su un'altra risposta, cercherò di spiegare più chiaramente per voi.

Il problema

Il tuo problema è quando si aggiunge position:fixed alla barra di navigazione, rimuove dal suo posto e lo infila nella parte superiore della pagina. Questo è il motivo per cui il resto dei tuoi contenuti salta in su - perché la barra di navigazione non è più dove si trovava.

Come correggere

È possibile aggirare questo avvolgendo il vostro elemento di navigazione in una nuova div - chiamiamolo nav-wrapper - e impostare la sua altezza per lo stesso del vostro elemento di navigazione. Questi sono conosciuti come elementi segnaposto. Questo nuovo wrapper e la barra di navigazione originale devono sempre avere la stessa altezza per il "salto" per scomparire.

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

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

</div> <!-- add this 

Ora, quando si imposta la barra di navigazione per fixed e scompare verso l'alto, il nuovo involucro che abbiamo creato con la stessa altezza mantiene il contenuto della pagina stessa. Quando la classe fissa è stata rimossa, torna indietro nel wrapper, senza spingere il contenuto verso il basso.

un suggerimento

Da quello che posso vedere sul vostro sito, ci sarà un grande divario in cui la barra di navigazione è stato fino a quando il nuovo sistema di navigazione fisso raggiunge quel punto e lo copre. Quello che vuoi, è un po 'di jQuery per capire dove mettere la navigazione corretta e dove nasconderlo. Mi spiego:

// 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'); 
    } 

}); 

È possibile aggiungere ulteriori funzionalità a questo esempio, in quanto è molto, molto essenziale. Probabilmente vorrai ricalcolare gli offset al ridimensionamento delle finestre come un'aggiunta.

una demo

This is a little demo which might help you - mi annoiavo e sentirsi utile :)

Answer 2

È necessario disporre di un segnaposto quando la propria nav passa da relativa a fissa. Quindi è necessario creare un nuovo div.

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


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

Ricordarsi di modificare ".nav", "nav-inner" e "nav-placeholder" come desiderato.

Per un navigatore appiccicoso completamente funzionale, controllare il mio sito web: http://www.swegre.se/

Answer 3

reso in questo modo la società: Aggiunto un elemento prima del nav:

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

E il jquery:

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

Quando scr oll giù a 150 il segnaposto ottiene l'altezza del nav, quando ho scorrere verso l'alto ancora una volta ho impostato è l'altezza a 0.

Ecco un violino: https://jsfiddle.net/herrfischerhamburg/562wu62y/