L'élément de navigation collant saute pendant le défilement

Dans Firefox, et surtout, j'ai couru dans un problème je ne peux pas comprendre comment le corriger.

Sur la page suivante, lors du défilement en bas de la page des sauts à plusieurs reprises, notamment sur les petits écrans où la page n'a pas sa pleine taille de l'affiche. Vous pouvez reproduire ce problème en faisant de votre navigateur plus petite que la page de sorte que vous avez à faire défiler.

C'est sur cette page: http://www.nucanoe.com/frontier-accessories/

Si je désactive le position:fixed sur le sélecteur de navigation, il résout le problème - mais nous avons besoin de la navigation à être collant. Est-il une solution pour résoudre ce problème? Je pense que nous pouvons avoir besoin d'utiliser jQuery en quelque sorte.

Merci d'avance!

source d'informationauteur Aaron M

  1. 38

    Après l'avoir vu vous demander de l'aide sur une autre réponse, je vais essayer de l'expliquer plus clairement pour vous.

    Le Problème

    Votre problème est lorsque vous ajoutez position:fixed à la barre de navigation, il l'enlève de sa place et se l'enfonce dans le haut de la page. C'est pourquoi le reste de votre contenu saute - parce que la barre de navigation n'est pas là où il était plus.

    Comment Réparer

    Vous pouvez contourner ce problème en emballage de votre élément de navigation dans une nouvelle div - appelons-nav-wrapper - et réglez sa hauteur à la même chose que votre élément de navigation. Ils sont connus comme des éléments réservés. Cette nouvelle enveloppe et l'original de votre barre de navigation doit toujours être à la même hauteur pour le 'saut' à disparaître.

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

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

</div> <!-- add this

    Maintenant, lorsque vous définissez la barre de navigation pour fixed et il disparaît vers le haut, le nouveau wrapper nous avons créé à la même hauteur conserve le contenu de la page le même. Lorsque le fixe de classe a été supprimée, il est de retour dans l'emballage de nouveau, sans pousser le contenu vers le bas.

    Une Suggestion

    De ce que je peux voir sur votre site, il y aura un grand vide où la barre de navigation a été jusqu'à ce que le nouveau fixe de navigation atteint ce point et le couvre. Ce que vous voulez, c'est un peu de jQuery pour trouver où faire la navigation fixes et où se cacher. Je vais vous expliquer:

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

});

    Vous voudrez peut-être ajouter plus de fonctionnalités à cet exemple, car il est très, très basique. Vous auriez probablement souhaitez recalculer les décalages sur la fenêtre de redimensionnement d'un ajout.

    Une Démo

    C'est une petite démo qui pourrait vous aider - Je m'ennuyais, et le sentiment de utile 🙂

  2. 2

    Vous avez besoin d'avoir un espace réservé lors de votre nav va de par rapport à fixe.
    Par conséquent, vous devez faire une nouvelle div.

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


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

    N'oubliez pas de changement ".nav", "navigation intérieure" et de la "nav-espace réservé" à votre désir.

    Pour un entièrement fonctionnel collant nav, consultez mon site web: http://www.swegre.se/

  3. 2

    Fait de cette façon maintenant: Ajout d'un élément avant de la valeur liquidative:

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

    Et le jquery:

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

    Quand j'ai faites défiler jusqu'à 150 l'espace réservé obtient la hauteur de la valeur liquidative, quand j'ai faites défiler vers le haut je l'ai de nouveau de la hauteur à 0.

    Ici est un violon: https://jsfiddle.net/herrfischerhamburg/562wu62y/