전체 화면 회전 목마 다음에 끈적한 스크롤 애니메이션 탐색 모음을 만드는 방법은 무엇입니까?

Question

부트 스트랩 부착으로 만들려고했으나 제대로 작동하지 않았습니다. 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 인 경우 그녀의 화면 높이보다 그때에만, 끈적 거리는 클래스 또는 navbar sticky 만들기 위해 사용하는 모든 트리거됩니다.