재단 5.0.3 방금 다운로드, 상단 바 끈적 작동하지

Question

나는 내가 JS 잘 넣었 5.

새로운 재단에 기존의 기초 3 응용 프로그램을 업그레이드하는 중이 야

: <script src="js/foundation/foundation.topbar.js"></script>

그러나 내가 트리플 내가 바로 Zurb 웹 사이트 떨어져 V 5.0.3을 사용하고 있음을 확인했습니다, 그리고 내 마크 업이 매우 간단 TypeError: this.settings.sticky_topbar is undefined

: 나는 스크롤에이 오류를보고 있어요

<nav class="top-bar sticky" data-topbar=""> 
    <!-- Title --> 
    <ul class="title-area"> 
    <li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li> 

    <!-- Mobile Menu Toggle --> 
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> 
    </ul> 

    <!-- Top Bar Section --> 
    <section class="top-bar-section"> 

    <!-- Top Bar Left Nav Elements --> 
    <ul class="left"> 

     <!-- Search | has-form wrapper --> 
     <li class="has-form"> 
     <div class="row collapse"> 
      <div class="large-8 small-9 columns"> 
      <input placeholder="Find Stuff" type="text"> 
      </div> 
      <div class="large-4 small-3 columns"> 
      <a href="#" class="alert button expand">Search</a> 
      </div> 
     </div> 
     </li> 

    </ul> 

    </section> 
</nav> 

모든 아이디어는 대단히 감사하겠습니다! 이런 종류의 동작은 이전 버전에서 이전에 버그로보고되었지만 온라인에서 찾을 수있는 모든 것이 5.0.3이 정상적으로 작동한다고 말합니다.

감사

- 제임스

Answer 1

foundation.topbar.js을 통해 읽은 후, 나는 단지 topbarContainer은 "끈끈한"클래스를 가진 것은 self.settings.sticky_topbar이 할당되도록 할 것입니다 것을 알 수있다.

따라서 nav 위에 div.sticky를 추가하면 모든 사항이 수정됩니다. 아무도 신경 쓰지 않으면 내 새 마크 업이 있습니다.

<div class="sticky"> 
    <nav class="top-bar" data-topbar> 
    <!-- Title --> 
    <ul class="title-area"> 
     <li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li> 

     <!-- Mobile Menu Toggle --> 
     <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> 
    </ul> 

    <!-- Top Bar Section --> 
    <section class="top-bar-section"> 

     <!-- Top Bar Left Nav Elements --> 
     <ul class="left"> 

     <!-- Search | has-form wrapper --> 
     <li class="has-form"> 
      <div class="row collapse"> 
      <div class="large-8 small-9 columns"> 
       <input placeholder="Find Stuff" type="text"> 
      </div> 
      <div class="large-4 small-3 columns"> 
       <a href="#" class="alert button expand">Search</a> 
      </div> 
      </div> 
     </li> 

     </ul> 

    </section> 
    </nav> 
</div> 

일반적으로 Zurb은 온라인 문서에서 매우 멋지다. 나는 어딘가에 끈적 끈적한 톱 바에 대한 예가 있었으면 좋겠다.

감사합니다.

- 제임스