如何使我的导航栏固定，但在我的网页上的特定部分？

-2

我的数字投资组合将由“4个部分”组成，这4个部分是4个独立的可滚动网页。请注意我的部分也被称为部分。例如，第一部分是#part1，并且一直到4。如何使我的导航栏固定，但在我的网页上的特定部分？

在#part1我不希望导航栏显示。但是，在第2,3,4部分中，我知道#part2, #part3, and #part4我希望导航出现。

这是一个example网站，我发现这是我的目标，我的投资组合看起来像导航栏。

我确实试图将2,3,4节放在一起，但是如果我删除'fixed-top'，它将从第1节删除导航栏，但导航栏的第3,4节将不可见。

问题

我怎样才能把我的导航栏上的部分2,3,4，但不会对第1条可见？

<body> 
    <!-- Page content --> 
    <!-- SECTION1 --> 
    <section id="part1"> 
     <div class="container h-100 d-flex justify-content-center align-items-center"> 
      <div class="row"> 
       <div class="col"> 
        <div class="chevron-row bounceInDown animated"> 
         <h1 class="text-center" id="title1">Hi, my name is Liam Docherty</h1> 
         <h4 class="text-center" id="title2">I'm a Front-End Web Developer from London</h4> 
         <h5 class="text-center" id="title3">Get in touch with me <a href=#part4 class="txtlink" target=_blank>here</a>.</h5> 
         <hr class="test"> 
         <p class="text-center">View my work</p> 
         <a href="#part2"> 
          <i class="fa fa-angle-double-down bounce fa-4x"></i> 
         </a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
    <div class="wrapsections"> 
     <nav class="navbar fixed-top navbar-light bg-faded"> 
      <a class="navbar-brand" href="#">Fixed top</a> 
     </nav> 
     <!-- SECTION2 --> 
     <section id="part2"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col"> 
        </div> 
       </div> 
      </div> 
     </section> 
     <!-- SECTION3 --> 
     <section id="part3"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col"> 
         <p>This is part 3</p> 
        </div> 
       </div> 
      </div> 
     </section> 
     <!-- SECTION4 --> 
     <section id="part4"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col"> 
         <p>This is part 4</p> 
        </div> 
       </div> 
      </div> 
     </section> 
    </div> 
</body>

来源

2017-08-06 Jon Bridge

我有一个CSS解决方案，请尝试使用position:sticky财产

CSS

.fixed-top{ 
     position:sticky; 
    }

Working Fiddle

希望这有助于..

来源

2017-08-06 04:18:00

嗨，导航栏仍然可见的第一节，我不会不会。感谢这篇文章。 –

@JonBridge你使用的是哪个版本的Bootstrap使用??，Bcoz我的代码在我的桌面上使用Bootstrap v4 –

$(document).ready(function(){ 
$('.navbar').hide(); 
    $(".fa.fa-angle-double-down").on('click', function(event) { 
     event.preventDefault(); 
    if (this.parentElement.hash !== "") { 
     event.preventDefault(); 

     // Store hash 
     var hash = this.parentElement.hash; 
console.log(`hash = ${hash}`); 
     $('html, body').animate({ 
     scrollTop: $(hash).offset().top 
     }, 800, function(){ 

     window.location.hash = hash; 
     }); 
    } // End if 
    console.log(`hash2 = ${hash}`); 
    }); 

    $(window).bind('scroll',function(){ 
    if ($(window).scrollTop() > 50) { 
      $('.navbar').show(); 
    }else 
    {$('.navbar').hide();} 
    }) 
});

使用此代码，我也更新了js-fiddle请检查出来。

来源

2017-08-06 04:31:12

我更新了你的jsfiddle而不是其他的 –

嗨，导航栏仍然可见，吨。感谢这篇文章。 –

如何使我的导航栏固定，但在我的网页上的特定部分？

回答

相关问题