Javascript Fixed навигации Выпуск

Я хотел бы поставить фиксированную навигацию по пользовательскому стилю XenForo, но у меня проблема: http://screencast.com/t/ttdpFz4DtQ6 Javascript Fixed навигации Выпуск

Навигационный шаблон:

<xen:edithint template="navigation.css" /> 

<xen:if is="@fixedNavigation"> 

<div class="fixedNavigationWrapper"> 

</xen:if> 

<div class="navigationHelper"></div> 

<div id="navigation" class="pageWidth {xen:if $canSearch, withSearch}"> 
    <div class="pageContent"> 
     <nav> 

<div class="navTabs"> 
    <ul class="publicTabs"> 

     <!-- home --> 
     <xen:if is="{$showHomeLink}"> 
      <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li> 
     </xen:if> 


     <!-- extra tabs: home --> 
     <xen:if is="{$extraTabs.home}"> 
     <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab"> 
      <xen:if is="{$extraTab.linksTemplate}"> 
       <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}"> 

       <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a> 
       <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a> 

       <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks"> 
        <div class="primaryContent menuHeader"> 
         <h3>{$extraTab.title}</h3> 
         <div class="muted">{xen:phrase quick_links}</div> 
        </div> 
        {xen:raw $extraTab.linksTemplate} 
       </div> 
      </li> 
      <xen:else /> 
       <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}"> 
        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a> 
        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if> 
       </li> 
      </xen:if> 
     </xen:foreach> 
     </xen:if> 


     <!-- forums --> 
     <xen:if is="{$tabs.forums}"> 
      <li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}"> 

       <a href="{$tabs.forums.href}" class="navLink NoPopupGadget" rel="Menu">{$tabs.forums.title}</a> 

       <div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} forumsTabLinks"> 
        <div class="primaryContent menuHeader"> 
         <h3>{$tabs.forums.title}</h3> 
         <div class="muted">{xen:phrase quick_links}</div> 
        </div> 
        <ul class="secondaryContent blockLinksList"> 
        <xen:hook name="navigation_tabs_forums"> 
         <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if> 
         <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if> 
         <xen:if is="{$visitor.user_id}"> 
          <li><a href="{xen:link 'watched/forums'}">{xen:phrase watched_forums}</a></li> 
          <li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li> 
         </xen:if> 
         <li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li> 
        </xen:hook> 
        </ul> 
       </div> 
      </li> 
     </xen:if> 


     <!-- extra tabs: middle --> 
     <xen:if is="{$extraTabs.middle}"> 
     <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab"> 
      <xen:if is="{$extraTab.linksTemplate}"> 
       <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}"> 

       <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a> 
       <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a> 

       <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks"> 
        <div class="primaryContent menuHeader"> 
         <h3>{$extraTab.title}</h3> 
         <div class="muted">{xen:phrase quick_links}</div> 
        </div> 
        {xen:raw $extraTab.linksTemplate} 
       </div> 
      </li> 
      <xen:else /> 
       <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}"> 
        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a> 
        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if> 
       </li> 
      </xen:if> 
     </xen:foreach> 
     </xen:if> 


     <!-- members --> 
     <xen:if is="{$tabs.members}"> 
      <li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}"> 

       <a href="{$tabs.members.href}" class="navLink NoPopupGadget" rel="Menu">{$tabs.members.title}</a> 

       <div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} membersTabLinks"> 
        <div class="primaryContent menuHeader"> 
         <h3>{$tabs.members.title}</h3> 
         <div class="muted">{xen:phrase quick_links}</div> 
        </div> 
        <ul class="secondaryContent blockLinksList"> 
        <xen:hook name="navigation_tabs_members"> 
         <li><a href="{xen:link members}">{xen:phrase notable_members}</a></li> 
         <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:phrase registered_members}</a></li></xen:if> 
         <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li> 
         <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if> 
         <xen:if is="{$canViewProfilePosts}"><li><a href="{xen:link find-new/profile-posts}">{xen:phrase new_profile_posts}</a></li></xen:if> 
        </xen:hook> 
        </ul> 
       </div> 
      </li> 
     </xen:if> 

     <xen:if is="@helpNavigationTab"> 
     <!-- help --> 
     <xen:if is="{$tabs.help}"> 
      <li class="navTab help <xen:if is="{$controllerName} == 'XenForo_ControllerPublic_Help'">selected<xen:else />Popup PopupControl PopupClosed</xen:if>"> 

       <a href="{$tabs.help.href}" class="navLink NoPopupGadget" rel="Menu">{$tabs.help.title}</a> 

       <div class="<xen:if is="{$controllerName} == 'XenForo_ControllerPublic_Help'">tabLinks<xen:else />Menu JsOnly tabMenu</xen:if>"> 
        <div class="primaryContent menuHeader"> 
         <h3>{$tabs.help.title}</h3> 
         <div class="muted">{xen:phrase quick_links}</div> 
        </div> 
        <ul class="secondaryContent blockLinksList"> 
        <xen:hook name="navigation_tabs_help"> 
         <li><a href="{xen:link help/smilies}">{xen:phrase smilies}</a></li> 
         <!-- <li><a href="{xen:link help/bb-codes}">{xen:phrase bb_codes}</a></li> --> 
            <li><a href="{xen:link help/trophies}">{xen:phrase trophies}</a></li> 
            <li><a href="{xen:link help/cookies}">{xen:phrase cookie_usage}</a></li> 
         <xen:if is="{$tosUrl}"> 
            <li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li> 
            </xen:if> 
          </xen:hook> 
        </ul> 
       </div> 
      </li> 
     </xen:if> 

     </xen:if>  

     <!-- extra tabs: end --> 
     <xen:if is="{$extraTabs.end}"> 
     <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab"> 
      <xen:if is="{$extraTab.linksTemplate}"> 
       <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}"> 

       <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a> 
       <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a> 

       <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks"> 
        <div class="primaryContent menuHeader"> 
         <h3>{$extraTab.title}</h3> 
         <div class="muted">{xen:phrase quick_links}</div> 
        </div> 
        {xen:raw $extraTab.linksTemplate} 
       </div> 
      </li> 
      <xen:else /> 
       <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}"> 
        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a> 
        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if> 
       </li> 
      </xen:if> 
     </xen:foreach> 
     </xen:if> 

     <!-- responsive popup --> 
     <li class="navTab navigationHiddenTabs Popup PopupControl PopupClosed" style="display:none">  

      <a rel="Menu" class="navLink NoPopupGadget"><span class="menuIcon">{xen:phrase menu}</span></a> 

      <div class="Menu JsOnly blockLinksList primaryContent" id="NavigationHiddenMenu"></div> 
     </li> 


     <!-- no selection --> 
     <xen:if is="!{$selectedTab}"> 
      <li class="navTab selected"><div class="tabLinks"></div></li> 
     </xen:if> 

    </ul> 

    <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if> 
</div> 

<span class="helper"></span> 

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

<xen:if is="@fixedNavigation"> 
</div> 
</xen:if>

, ИС-код:

<xen:if is="@fixedNavigation"> 
<script type="text/javascript"> 
$(window).scroll(function() { 
    if ($(window).scrollTop() > $('.fixedNavigationWrapper').offset().top) 
     $('.fixedNavigationWrapper').addClass('fixed'); 
    else 
     $('.fixedNavigationWrapper').removeClass('fixed'); 
}); 
</script> 
</xen:if>

CSS:

.fixedNavigationWrapper.fixed 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 100000; 
}

Когда я просматриваю страницу, навигация не отображается и исчезает. Я хотел бы знать, откуда исходит ошибка.

источник

2014-12-12 Gradevole

и где это определение стиля для 'fixed' класса? –

О, извините! .fixedNavigationWrapper.fixed { \t позиция: фиксированная; \t наверх: 0; \t левый: 0; \t Право: 0; \t z-index: 100000; } – Gradevole

Я не вижу проблемы с CSS, пока у вас не будет содержимого внутри '.fixedNavigationWrapper'. Если у вас нет содержимого внутри него, оно не появится. Вы можете попробовать добавить 'height: 50px' или любое другое значение, чтобы заставить его заставить отображаться в этом случае. –

Попробуйте добавить проверку, чтобы убедиться, что фиксированный класс уже установлен. Установка каждый раз, когда событие прокрутки страниц обжигают, вероятно, вызовет вспышку и может даже сделать элемент исчезнет:

if(!$(".fixedNavigationWrapper").hasClass("fixed")) { 
    $('.fixedNavigationWrapper').addClass('fixed'); 
}

источник

2014-12-12 08:32:21 michaelpoltorak

Можете ли вы дать мне полное исправление, пожалуйста? Потому что я пытался, но он все равно не работает. – Gradevole

Javascript Fixed навигации Выпуск

ответ

Смежные вопросы