web-dev-qa-db-ja.com

スクロール後に表示されるbootstrapで非表示のnavbarを作成する方法は？

bootstrapで非表示になり、ページのスクロールを開始した後にのみ表示されるnavbarを使用して作成する方法を教えてください。

twitter-bootstrapnavbarhidden
19
Valentin-Nicusor Barbu

Navbarがフェードインし、navbarが表示されるまでにユーザーがスクロールする必要がある範囲を制御できるバリエーションを次に示します。 http://jsfiddle.net/panchroma/nwV2r/

Navbarだけでなく、ほとんどの要素で動作するはずです。

標準のHTMLを使用する

[〜＃〜] js [〜＃〜]

(function ($) {
  $(document).ready(function(){

    // hide .navbar first
    $(".navbar").hide();

    // fade in .navbar
    $(function () {
        $(window).scroll(function () {

                 // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 100) {
                $('.navbar').fadeIn();
            } else {
                $('.navbar').fadeOut();
            }
        });
    });

});
  }(jQuery));
51
David Taiaroa

このサイトを参照してください： https://redvinestudio.com/how-to-make-a-menu-fade-in-on-scroll-using-jquery/

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > 200) {
                $('#menu').fadeIn(500);
            } else {
                $('#menu').fadeOut(500);
            }
        });
    });
})(jQuery);
</script>
3
Anuruddha Thennakoon

これは、キャッシュされた要素と動的スクロール値を備えた改良版です。

$(document).ready(function(){
    var $nav = $('.nav');//Caching element
    // hide .navbar first - you can also do this in css .nav{display:none;}
    $nav.hide();

    // fade in .navbar
    $(function () {
        $(window).scroll(function () {
            // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 100) { //For dynamic effect use $nav.height() instead of '100'
                $nav.fadeIn();
            } else {
                $nav.fadeOut();
            }
        });
    });

});
1
wanted70a

その解決策は this w3schools website にあります。ブートストラップは必要ありません。あなたはcssとjavascriptのみでそれを行うことができます。

1
Nyein

この答えは機能しますスクロールバーの方法により、スクロールバーが非表示になり、スクロールバーが上にある場合、一点では表示されません

//The variable takes the value of the new position each time
var scrollp=0;
    (function ($) {
        $(document).ready(function(){
            $(function () {
                $(window).scroll(function () {
                // ask about the position of scroll 

                    if ($(this).scrollTop() < scrollp) {
                        $('.navbar').fadeIn();
                        scrollp= $(this).scrollTop();
                    } else {
                        $('.navbar').fadeOut();
                        scrollp= $(this).scrollTop();
                    }
                });
            });

        });
    }(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0
محمد الوهاشي