jqueryとcss3でナビゲーションバーを一番下に移動する方法(コード)

不言
リリース: 2018-07-26 11:50:58
オリジナル
1644 人が閲覧しました

この記事で共有した内容は、jqueryとcss3でナビゲーションバーを一番下に移動する方法についてです(コード) 次に、具体的な内容を見てみましょう。困っている友達を助ける。

ナビゲーションバー

.navigation {
    position: fixed;
    bottom: 100px;
    right: 100px;
    z-index: 100;
}.navigation {
    transition: bottom 2s;
    -webkit-transition: bottom 2s;
}
ログイン後にコピー

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'
        });
    }
});
ログイン後にコピー

関連する推奨事項:

Css Spriteが画像ステッチ技術を実装する方法

cssとjsモバイルターミナルを使用して携帯電話の水平画面と垂直画面のステータスをそれぞれ確認する方法

以上がjqueryとcss3でナビゲーションバーを一番下に移動する方法(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!