ナビゲーションバーを固定したいのですが、ウェブページの特定のセクションにするにはどうしたらいいですか？

-2

私のデジタルポートフォリオは、4つの別々のスクロール可能なWebページである「4つのセクション」で構成されます。私のセクションはパーツとも呼ばれます。たとえば、セクション1は#part1であり、これは最大4になります。ナビゲーションバーを固定したいのですが、ウェブページの特定のセクションにするにはどうしたらいいですか？

オン#part1私はナビゲーションバーを表示したくありません。しかし、セクション2,3,4（#part2, #part3, and #part4として知られています）では、ナビゲーションが表示されます。

私が見つけたexampleサイトは、ナビゲーションバーのように見えるようにポートフォリオを目指している方法です。

私は2,3,4セクションをまとめてラップしようとしましたが、「fixed-top」を削除するとセクション1のナビゲーションバーは削除されますが、セクション3,4ではナビゲーションバーは表示されません。

質問

どのように私は、セクション2,3,4に私のナビゲーションバーを置くが、セクション1に見ることができないのですか？

My site code

<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

こんにちは、ナビゲーションバーはセクション1に表示されますが、私はそうではありません。投稿に感謝します。 –

@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を更新していません –

こんにちは、ナビゲーションバーは、 t。投稿に感謝します。 –

ナビゲーションバーを固定したいのですが、ウェブページの特定のセクションにするにはどうしたらいいですか？

答えて

関連する問題