Cách tạo thanh điều hướng ẩn với bootstrap hiển thị sau khi bạn cuộn?

Question

Bạn có thể cho tôi biết cách tôi có thể tạo bằng bootstrap thanh điều hướng bị ẩn và chỉ hiển thị sau khi bạn bắt đầu cuộn trang không?

Answer 1

Dưới đây là một biến thể nơi navbar mất dần trong và bạn có thể kiểm soát cách người dùng xa cần phải di chuyển trước khi thanh điều hướng xuất hiện: http://jsfiddle.net/panchroma/nwV2r/

Nó sẽ làm việc trên hầu hết các yếu tố, không chỉ NavBars.

Sử dụng HTML tiêu chuẩn của bạn

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

Answer 2

Tham khảo trang web này: 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> 

Answer 3

này được phiên bản cải tiến với thành phần được lưu trữ và giá trị cuộn năng động.

$(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(); 
      } 
     }); 
    }); 

}); 

Answer 4

Câu trả lời này sẽ làm việc Do cách thanh cuộn để đi xuống nó sẽ ẩn và nếu thanh cuộn lên nó sẽ hiển thị không trong một thời điểm

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