So verschieben Sie die Navigationsleiste mit JQuery und CSS3 (Code) nach unten

Der in diesem Artikel mit Ihnen geteilte Inhalt befasst sich mit der Umsetzung der Navigationsleiste nach unten mit JQuery und CSS3 (Code). Schauen wir uns als Nächstes den spezifischen Inhalt an. Ich hoffe, es kann den Bedürftigen helfen.

Navigationsleiste

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

JQ-Code

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

Verwandte Empfehlungen:

Wie CSS Sprite die Bildstichtechnologie implementiert

So verwenden Sie CSS- und JS-Mobilterminals, um den Status der horizontalen bzw. vertikalen Bildschirme des Mobiltelefons zu ermitteln

Das obige ist der detaillierte Inhalt vonSo verschieben Sie die Navigationsleiste mit JQuery und CSS3 (Code) nach unten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!