只在主頁上加載WordPress腳本，否則添加類

-1

不太確定如何實現我在此嘗試做的事情，希望你們可以提供幫助。我在我的function.js文件中有一個腳本，當頁面向下滾動到某個點時，我的固定標題會淡入視圖。只在主頁上加載WordPress腳本，否則添加類

我希望這個腳本能夠像在主頁上一樣工作，但我希望在所有內部頁面上永久可見頁眉。

我敢肯定，這將需要將這個腳本分解到它自己的文件並改變它一點點，但我願意建議。

我最初的想法是有運行按預期主頁上的腳本，但創造某種別人/如果PHP語句，說：

「如果這是主頁，什麼也不做，否則，加一類的不透明的元件#navbar」

HTML：

<div id="navbar" class="navbar bg transition"> 
     <div class="row"> 
      <img src="<?php bloginfo('template_directory'); ?>/images/logo-small.png" alt="Jot logo" class="navlogo"> 
      <nav id="site-navigation" class="navigation main-navigation" role="navigation"> 
       <div class="menu" id="mobilemenu"> 
        <span class="menu-global menu-top"></span> 
        <span class="menu-global menu-middle"></span> 
        <span class="menu-global menu-bottom"></span> 
       </div> 
      <div id="menuexpand"> 
       <div> 
        <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu')); ?> 
       </div> 
      </div> 
      </nav><!-- #site-navigation --> 
     </div><!-- row --> 
    </div><!-- #navbar -->

CSS：

.bg { 
    background: #525454; 
    opacity: 0; 
} 

.show { 
    opacity: 1; 
} 

.transition {  
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

.navbar { 
    background: none; 
    position: fixed; 
    z-index: 999; 
    padding-top: 15px; 
    top: 0; 
    opacity:0.3; 
}

JS：

$(window).scroll(function() { 
    // 100 = The point you would like to fade the nav in. 

    if ($(window).scrollTop() > 100){ 

     $('.bg').addClass('show'); 

    } else { 

     $('.bg').removeClass('show'); 

    };  
    }); 

    $('.scroll').on('click', function(e){ 
     e.preventDefault() 

    $('html, body').animate({ 
     scrollTop : $(this.hash).offset().top 
     }, 1500); 
    });

這裏的任何想法？就像我說的，我願意提出建議。

來源

2014-12-05 eloist

好吧，這裏是我的解決方案：

我創建了一個JS腳本：

(function ($) { 
    $('#navbar').addClass('show'); 
}(jQuery));

後來我調整了的if/else早些時候發佈：

<?php if (is_home() || is_front_page()) { wp_enqueue_script('header-fade', get_template_directory_uri() . '/js/header-fade.js'); } else { wp_enqueue_script('opaque', get_template_directory_uri() . '/js/opaque.js'); }; ?>

所以，如果它的頭版（家），上滾動腳本火災褪色。如果是任何其他頁面，則會啓用不透明腳本，這會使頁面加載時顯示導航欄。

完成並完成。 :)

來源

2014-12-06 02:14:55 eloist

你可以在你的主頁上添加一個類到主體。並與固定位置佈局.bg，只要你想爲其他頁面：

<body class="home"> 

:not(.home) .bg{position:fixed;}

來源

2014-12-05 22:42:08

不太確定這將實現。我試過了，但沒有運氣。這是WP，所以身體上的家庭課程會應用到網站中的每個頁面。我也試着用不透明度的方法：1，而不是位置：固定，但這使我的主頁上的滾動淡出效果無效。 – eloist 2014-12-05 22:49:47

你不能爲不同的頁面分配不同的類別嗎？ – 2014-12-05 22:53:53

好吧，頁面是通過WP循環生成的，所以開頭體標籤位於header.php文件中，該文件被添加到網站上的每個頁面。 – eloist 2014-12-05 22:55:28

if (is_home() || is_front_page()) { 
    wp_enqueue_script($scriptUrl); 
} else { 
    add_filter("body_class" , function($classes){ 
     $classes[] = "added-class"; 
     return $classes; 
    }); 
}

如果是家，排隊一些腳本（前應wp_enqueue_scripts動作完成否則將一些類添加到身體。記住壽，你需要做適當的身體標記

<body <php body_class(); ?>>

來源

2014-12-05 22:55:51 pie6k

//我可以做// add_filter（#navbar .... //並讓它嚮導航欄ID元素添加一個類？ – eloist 2014-12-05 22:58:00

因此，這會正確加載我的腳本，但在內部頁面上它不會添加'show'類我#navbar元件 – eloist 2014-12-05 23:14:54

'<？PHP的 \t \t \t如果（is_home（）|| is_front_page（））{ \t \t wp_enqueue_script（ '標題淡變'，get_template_directory_uri（）「。/js/header-fade.js '）; \t \t}否則{ \t \t的add_filter（' ＃導航欄 '函數（$類）{ \t \t $類[] =' .show'; \t \t return $ classes; \t \t}）; \t \t} \t？>' – eloist 2014-12-05 23:21:47

只在主頁上加載WordPress腳本，否則添加類

回答

相關問題