在向下滚动内容时如何固定导航菜单(辅助菜单)?

时间:2019-05-02 11:55:04

标签: javascript html css

我在页面上有一个主菜单,然后在标题部分下有另一个菜单,用于对页面的不同部分进行分类。我想将此辅助菜单固定在适当的位置,以便在我滚动时它保持在适当的位置(页面顶部。问题是我的主菜单也已经固定在页面顶部,所以我没有确定是否可行。

我尝试将其固定到位,但是文本会滚动浏览,如果我将其固定到页面顶部,它将消失。

 <div class="culmn">
            <!--Home page style-->


            <nav class="navbar navbar-default bootsnav navbar-fixed">
                <div class="navbar-top bg-grey fix">
                    <div class="container">
                        <div class="row">
                          <div class="col-md-6" style="left: 0px; top: 0px">
                                <div class="navbar-callus text-left sm-text-center">
                                    <ul class="list-inline">
                                        <li><a href="tel:0878209100"><i class="fa fa-phone"></i> Call us: 087 820 9100</a></li>
                                        <li><a href="mailto:sales@urs.co.za"><i class="fa fa-envelope-o"></i> Contact us: sales@urs.co.za</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>





                    <!-- Start Header Navigation -->
                    <div class="container">
                    <div class="row">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                            <i class="fa fa-bars"></i>
                        </button>
                      <a href="index.html"><img src="assets/images/URS-Logo.png" alt="" width="150" class="logo"></a>


                    </div>
                    <!-- End Header Navigation -->

                    <!-- navbar menu -->
                    <div class="collapse navbar-collapse" id="navbar-menu">

                      <ul class="nav navbar-nav navbar-right">                  
                            <li><a href="our-story.html">Our Story</a></li>
                        <li class="dropdown">
        <a href="solutions" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Solutions</a>
         <ul class="dropdown-menu"> 
         <li><a href="pos">Point of sale (POS)</a></li>
         <li><a href="reporting">Business Intelligence &amp; Reporting </a></li>         
         <li><a href="solutions#Integrations">Integrations</a></li>
         <li><a href="solutions#DM">Data Management</a></li>
        </ul>
       </li>
       <li><a href="customers.html">Our Customers</a></li>            
                             <li><a href="whats-new.html">What's New</a></li>
                            <li><a href="contact.html">Contact</a></li>
                                                   </ul>

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

    <!--Home Sections-->        
    <section id="home" class="home bg-black fix" style="background-image:url('assets/images/Man-on-pc-using-business-intelligence.jpg')">

  <div class="container">
        <div class="row">
        <div class="main_home text-center home-main-text">
          <div class="col-md-12" style="left: 0px; top: 0px">
              <div class="hello_slid">
                                    <div class="slid_item">
                                        <div class="home_text ">
                                             <h2 class="text-white">Enhance your reporting experience</h2>                    
                                                <h5 class="text-white">Retail Intelligence is our business intelligence software designed to enhance your reporting experience.The intention is to intelligently display what is important to your business so that you can save time and focus on what's important to you.</h5>
                                    </div> 
    <div class="home_btns m-top-40">                                
                            <a class="btn btn-primary m-top-20" onclick="return gtag_report_conversion('mailto:sales@urs.co.za');"
                            href="mailto:sales@urs.co.za?subject=More info on Retail Intelligence please!">Get in touch to arrange a free demo &gt;</a> 

                        </div>
                    </div>              
                 </div>
            </div>
            </div>
                </div>
            </div>

            </section>

      <section id="Retail Intelilgence">        
      <div class="roomy-40">
       <h2 style="text-align:center">Gain valuable insights and make better 
       business decisions with <strong><br>Retail Intelligence </strong></h2>


  <div class="urs-bar urs-dark-gray">
  <div class="urs-wrap">
    <button class="urs-bar-item urs-button tablink urs-red" onclick="openCity(event,'Overview')">Overview</button>
    <button class="urs-bar-item urs-button tablink" onclick="openCity(event,'Sales')">Sales</button>
    <button class="urs-bar-item urs-button tablink" onclick="openCity(event,'Customers')">Customers</button>
    <button class="urs-bar-item urs-button tablink" onclick="openCity(event,'Staff')">Staff</button>
    <button class="urs-bar-item urs-button tablink" onclick="openCity(event,'Inventory')">Inventory</button>
    <button class="urs-bar-item urs-button tablink" onclick="openCity(event,'Risk')">Risk</button>
  </div>
  </div>

我希望菜单固定在主菜单下方。有可能吗?

0 个答案:

没有答案