フルスクリーンカルーセルの後にあるスティッキースクロールアニメーションナビゲーションバーを作成する方法は？

Question

ブートストラップ付きで作ってみましたが、うまくいかなかった。 スクロールバーをJavaScriptとスクロールアニメーションを使用してCSSトランジションまたはJavaScriptを使用して作成するにはどうすればよいですか？

データ-スパイは= "=" 630" をデータ・オフセット・トップを "貼る">ブートストラップからである。

<div class="topnavhome"> 
 
    <nav class="navbar" data-spy="affix" data-offset-top="630"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6 col-sm-4 col-xs-12"> 
 
      <div class="logo-wrapper"> 
 
      <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="N logo" /></a> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-6 col-sm-8 col-xs-12"> 
 
      <div class="social-link"> 
 
      <span><i class="fa fa-phone phone" aria-hidden="true"></i> 000 000 000000</span> 
 
      <ul> 
 
       <li><a href="#" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> 
 
       <li><a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> 
 
      </ul> 
 
      </div> 
 

 
      <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav navbar-right "> 
 
       <li><a href="index.html" class="active">Home</a></li> 
 
       <li><a href="about.html">About Us</a></li> 
 
       <li><a href="supplements.html">Supplements</a></li> 
 
       <li><a href="faq.html">FAQs</a></li> 
 
       <li><a href="contact.html">Contact</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</div>

Answer 1

私はあなたがナビゲーションバーが後に粘着性であることを意味すると仮定あなたは、フルスクリーンカルーセル上にスクロールします。私が間違っているなら、私を修正してください。

を行うには、window要素のscrollイベントを使用してoffset().topがHIGときに確認することができ、ということ彼女の画面の高さよりも、その時点でのみ、スティッキーなクラスや、あなたがナビバーをスティッキーにするために使用するものがトリガーされます。