スクロールの固定ナビゲーションバー

スクロールで固定ナビゲーションバーを作成できないようです。私はここに掲載されている回答のいくつかを見てきましたが、私の解決策のために働くことはできません。私が直面している問題は、ナビゲーションバーがヘッダーの後にスクロールしないということです。ヘッダーの下の固定位置に留まり、スクロールダウンしても移動しません。何か案は？スクロールの固定ナビゲーションバー

//jQuery to collapse the navbar on scroll 
 
$(window).scroll(function() { 
 
    if ($(".navbar").offset().top > 50) { 
 
     $(".navbar").addClass("top-nav-collapse"); 
 
    } else { 
 
     $(".navbar").removeClass("top-nav-collapse"); 
 
    } 
 
}); 
 

 
//jQuery for page scrolling feature - requires jQuery Easing plugin 
 
$(function() { 
 
    $('a.page-scroll').bind('click', function(event) { 
 
     var $anchor = $(this); 
 
     $('html, body').stop().animate({ 
 
      scrollTop: $($anchor.attr('href')).offset().top 
 
     }, 1500, 'easeInOutExpo'); 
 
     event.preventDefault(); 
 
    }); 
 
});

body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 

 
@media(min-width:767px) { 
 
    .navbar { 
 
\t \t position: relative 
 
     padding: 20px 0; 
 
     -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; 
 
     -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; 
 
     transition: background .5s ease-in-out,padding .5s ease-in-out; 
 
     background-color: azure 
 
\t \t \t 
 
    } 
 

 
    .top-nav-collapse { 
 
     padding: 0; 
 
    } 
 
}

<body id="home" data-spy="scroll" data-target=".navbar-default"> 
 
    
 
     <!-- Header --> 
 
     <header id="top" class="header-Home"> 
 
      <div class="text-vertical-center"> 
 

 
       <!--<img src="img/logocrop2.svg" class="CenterScreen" style="display:inline"> --> 
 
     <div class="row"> 
 
         <div class="col-sm-4 col-sm-push-4"> 
 
          <h4><a href="#About">About</a></h4> 
 
          <h4><a href="#Services">Services</a></h4> 
 
          <h4><a href="#Contact">Contact</a></h4> 
 
         </div> 
 
       </div> 
 
          </div> 
 

 

 
     </header> 
 

 
    
 
     <nav class="navbar navbar-default" role="navigation"> 
 
      <div class="container"> 
 
         <div class="navbar-header page-scroll"> 
 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
           <span class="sr-only">Toggle navigation</span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
          </button> 
 
          <a class="navbar-brand page-scroll" href="#home">A&amp;Co</a> 
 
         </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
         <div class="collapse navbar-collapse navbar-right navbar-ex1-collapse"> 
 
              <ul class="nav navbar-nav"> 
 
           <!-- Hidden li included to remove active class from about link when scrolled up past about section --> 
 
           <li class="hidden"> 
 
            <a class="page-scroll" href="#home"></a> 
 
           </li> 
 
           <li> 
 
            <a class="page-scroll" href="#about">About</a> 
 
           </li> 
 
           <li> 
 
            <a class="page-scroll" href="#services">Services</a> 
 
           </li> 
 
           <li> 
 
            <a class="page-scroll" href="#contact">Contact</a> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
         <!-- /.navbar-collapse --> 
 
        </div> 
 
        <!-- /.container --> 
 
     </nav> 
 
       
 
    <!-- Intro Section --> 
 
    <section id="intro" class="intro-section"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <h1>Scrolling Nav</h1> 
 
        <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p> 
 
        <a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 

 
    <!-- About Section --> 
 
    <section id="about" class="about-section"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <h1>About Section</h1> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 

 
    <!-- Services Section --> 
 
    <section id="services" class="services-section"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <h1>Services Section</h1> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 

 
    <!-- Contact Section --> 
 
    <section id="contact" class="contact-section"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <h1>Contact Section</h1> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 

 
    <!-- jQuery --> 
 
    <script src="js/jquery.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="js/bootstrap.min.js"></script> 
 

 
    <!-- Scrolling Nav JavaScript --> 
 
    <script src="js/jquery.easing.min.js"></script> 
 
    <script src="js/scrolling-nav.js"></script> 
 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
 

 
</body> 
 

 
</html>

スクリーン1

スクリーンショット2

出典

2017-01-07 ffxdean

あなたはそれが私のために働いたNAVのためのCSSで

position: fixed;

ですが、あなたが後にあるかかもしれないことをスクロールすると同じ場所にナビゲーションバーを維持するために...

出典

2017-01-07 17:23:22

それは私にとってはうまくいきませんでした。私はスクリーンショットに示されているようにnavbarの位置を保持したいと思いますが、ユーザーがスクロールダウンするとその位置に保持したいと思います。 – ffxdean

現在、@ffxdeanを下にスクロールしたときの動作をGIFで表示できますか –

スクロールの固定ナビゲーションバー

答えて

関連する問題