web-dev-qa-db-fra.com

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

Dans Firefox en particulier, j'ai rencontré un problème que je n'arrive pas à résoudre.

Sur la page suivante, lors du défilement vers le bas, la page saute plusieurs fois - principalement sur des écrans plus petits où la page n'a pas sa pleine taille affichée. Vous pouvez reproduire ce problème en rendant votre navigateur plus petit que la page, vous devez donc 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 que la navigation soit collante. Existe-t-il une solution pour résoudre ce problème? Je pense que nous devrons peut-être utiliser jQuery d'une manière ou d'une autre.

Merci d'avance!

cssscrollsticky
16
Aaron M

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

Le problème

Votre problème est lorsque vous ajoutez position:fixed à la barre de navigation, il le supprime de sa place et le colle en haut de la page. C'est pourquoi le reste de votre contenu saute - car la barre de navigation n'est plus là où elle était.

Comment réparer

Vous pouvez contourner ce problème en enveloppant votre élément de navigation dans un nouveau div - appelons-le nav-wrapper - et définissez sa hauteur sur la même valeur que votre élément de navigation. Ceux-ci sont connus comme des éléments d'espace réservé. Ce nouveau wrapper et votre barre de navigation d'origine doivent toujours avoir la même hauteur pour que le "saut" disparaisse.

<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 sur fixed et qu'elle disparaît en haut, le nouveau wrapper que nous avons créé avec la même hauteur conserve le contenu de la page. Lorsque la classe fixe a été supprimée, elle se remet dans le wrapper, sans abaisser le contenu.

Une suggestion

D'après ce que je peux voir sur votre site, il y aura un grand écart où se trouvait la barre de navigation jusqu'à ce que la nouvelle navigation fixe atteigne ce point et la couvre. Ce que vous voulez, c'est un petit jQuery pour savoir où rendre la navigation fixe et où la cacher. Je vais t'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 des fonctionnalités supplémentaires à cet exemple, car il est très, très basique. Vous voudrez probablement recalculer les décalages lors du redimensionnement de la fenêtre en un seul ajout.

Une démo

Ceci est une petite démo qui pourrait vous aider - Je m'ennuyais et me sentais utile :)

47
TheCarver

Faites comme ça maintenant: Ajout d'un élément avant la navigation:

<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>

Lorsque je fais défiler jusqu'à 150, l'espace réservé obtient la hauteur de la navigation, lorsque je fais défiler à nouveau, je règle sa hauteur sur 0.

Voici un violon: https://jsfiddle.net/herrfischerhamburg/562wu62y/

2
Henning Fischer

Vous devez avoir un espace réservé lorsque votre navigation passe de relative à fixe. Par conséquent, vous devez faire un nouveau 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 changer ".nav", "nav-inner" et "nav-placeholder" selon vos désirs.

Pour une navigation collante entièrement fonctionnelle, consultez mon site Web: http://www.swegre.se/

2
SwegreDesigns

J'ai résolu le problème différemment, donc sur Firefox comme vous pouvez le voir dans les journaux, il défile lui-même, donc pour arrêter ce défilement, j'ai fait une déclaration simple

$(document).ready(function () {
        var header = $('#left-menu');
        var offset = header.offset().top;
        var up = true;
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();
            console.log(scroll + ' ' + offset )
            if (scroll >= offset) {
                header.addClass('sidebar-sticky');
                if (up){
                    $(window).scrollTop(offset);
                    up=false;

                }


            } else {
                up=true;
                header.removeClass('sidebar-sticky');
            }
        });


    });

cette solution fonctionne pour moi quand je ne peux pas spécifier la hauteur des div que j'utilise.

0
Aleksy Ruszała