How to fix only fix a bootstrap menu at the top on scroll

Question

I have a bootstrap menu that is fixed at the top my website but I do not want it to be fixed at the top except when it is scrolled. What i mean is that, when you visit the website, the menu should be let's says under <div id='menu'> </div> but when you scroll then it will move to the top as it is already now in my code

This is the code for my menu which is already at the top now

<!-- Navigation and Menu-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <!-- Originaly it had this class="navbar-brand" -->



    <!--  
      <a  class="navbar-brand"   href="index.php" rel="charger_tout" data-ajax="id_du_milieu" data-icon="Oui">


       <img src="media/uploads/images/PCI_sm.png" style="width:120px;height:120px;"> 




<img src="images/my_logo_transparent.png" alt=""     class="img-responsive">




</a>

-->


    </div>


    <div class="collapse navbar-collapse">













      <ul class="nav navbar-nav navbar-right">
            <li class="dropdown menu-withdraw ">
      <a href="index.php" rel="charger_tout" data-ajax="id_du_milieu" data-icon="Oui">
        <i class='fa fa-home' style='color:initial'></i>  

       Home      


        </a>
    </li>



    <li class="dropdown menu-withdraw ">
      <a href="about.php">


        About



               </a>




    </li>


    <li class="dropdown menu-withdraw">
      <a href="articles-pmg-mission-and-vision.php">
         Vision and Mission       </a>

    </li>


    <li class="dropdown menu-withdraw">
      <a href="articles-pmg-ceo.php">
         The CEO       </a>

    </li>












    <li class=" ">
      <a href="contact-us.php" rel="charger_tout" data-ajax="id_du_milieu" data -icon="Oui">


   Contact      


         </a>
    </li>
    <li class="dropdown menu-withdraw ">
      <a href="shop.php" title="Patron Shop" rel="charger_tout" data-ajax="id_du_milieu" data-icon="Oui">
       <i class="fa fa-fw fa-shopping-cart"></i>  P-Shop         </a>

    </li>




      </ul>





       <div class="input-group">  &nbsp; </div>



       <?php
    /*
      <!-- Mobile Search -->
      <form class="navbar-form navbar-right visible-xs" role="search" method="get" action="post-theme-default">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="title">
          <span class="input-group-btn">
            <button type="submit" class="btn btn-theme-primary" type="button">Search!</button>
          </span>
        </div>
      </form>

        */

     ?>   


    </div>

    <!--/.nav-collapse -->


  </div>
</div> 
<!-- / .navigation -->


<script>
    $(document).ready(function() {
        $(".navbar-collapse > ul.navbar-nav > li").each(function() {
            var obj = $(this).find('ul > .active');
            if (obj.length > 0) {
                $(this).addClass('active');
                obj.removeClass('active');
                return false;
            }
        });
    });
</script>

Question

In the code above, the menu is fixed at the top but i do not want it to be at the top automatically but to go to the top after the user has scrolled . How to achieve that ?

I want a nav bar that will react like the one use by smint. The nav bar will only go to the top on scroll. Here is a Fiddle of what I already have.

Answer 1

var distance = $('#menu').offset().top; 

    $(window).scroll(function () {

         if ($(window).scrollTop() >= distance) {
             $('#menu').addClass("navbar-fixed-top");
         } else {
             $('#menu').removeClass("navbar-fixed-top");
         }
     });

remove your navbar-fixed-top class and try this js

Answer 2

This link might help you.

http://www.1stwebdesigner.com/create-stay-on-top-menu-css3-jquery/

<div id="navi">
    <div id="menu" class="default">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Freebies</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><a href="#">WordPress</a></li>
        </ul>
    </div><!-- close menu -->
</div><!-- close navi -->