Comment déplacer la barre de navigation vers le bas avec jquery et css3 (code)

Le contenu partagé avec vous dans cet article explique comment réaliser le mouvement de la barre de navigation vers le bas avec jquery et css3 (code). Le contenu est très détaillé. Ensuite, jetons un œil au contenu spécifique. J'espère que cela pourra aider ceux qui en ont besoin, mon ami.

Barre de navigation

.navigation {
    position: fixed;
    bottom: 100px;
    right: 100px;
    z-index: 100;
}.navigation {
    transition: bottom 2s;
    -webkit-transition: bottom 2s;
}

Code JQ

var nav = eval($('.navigation').offset().top - $(window).scrollTop());
$(window).on('scroll', function() {
    var navh = $('.navigation').height();
    var foot = parseInt($('.footer').offset().top - $(this).scrollTop() - navh);
    /*console.log(nav - foot);*/
    if(nav == foot || nav > foot) {
        $('.navigation').css({
            'position': 'fixed',
            'bottom': '400px'
        });
    } else {
        $('.navigation').css({
            'position': 'fixed',
            'bottom': '100px'
        });
    }
});

Recommandations associées :

Comment Css Sprite implémente la technologie d'assemblage d'images

Comment utiliser les terminaux mobiles CSS et JS pour déterminer respectivement l'état des écrans horizontaux et verticaux du téléphone mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!