Question

我有一个固定在我的网站顶部的引导菜单但我不希望它被固定在顶部，除非它滚动。我的意思是，当你访问网站时，菜单应该在<div id='menu'> </div>下面说，但是当你滚动时它将移动到顶部，因为它现在已经存在于我的代码中

这是我的菜单的代码，现在已经位于顶部

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

问题

在上面的代码中，菜单固定在顶部，但我不希望它自动位于顶部，而是在用户滚动后转到顶部。如何实现？

我想要一个导航栏，它会像smint那样使用。导航栏只会滚动到顶部。这是我已经拥有的Fiddle。

Answer 1

if(a.length>4 && !a[4].isEmpty()){

删除你的navbar-fixed-top类并试试这个js

Answer 2

此链接可能对您有所帮助。

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

如何修复仅修复滚动顶部的引导菜单

2 个答案: