WordPress仅在首页上加载脚本，否则添加类 [英] WordPress load script only on homepage, else add class

问题描述

我不太确定如何实现我在这里想要做的事情，希望你们能为您提供帮助. 我的function.js文件中包含一个脚本，当页面向下滚动到特定位置时，该脚本可以使固定的标题消失在视图中.

Not really sure how to achieve what I am trying to do here, hopefully you guys can help. I have a script within my function.js file which makes my fixed header fade into view when the page is scrolled down to a certain point.

我希望此脚本能够像在主页上一样工作，但是我希望该标题在所有内部页面上永久可见.

I want this script to work as it is on the home page, but I'd like to have the header permanently visible on all interior pages.

我敢肯定，这需要将该脚本分解成自己的文件并对其进行一些更改，但是我愿意提出建议.

i'm sure this will require breaking this script out into it's own file and changing it around a bit, but I'm open to suggestion.

我最初的想法是让脚本按预期的方式在首页上运行，但会创建某种else/if php语句，说明:

My initial thoughts are to have the script run as intended on the homepage, but create some sort of else/if php statement that says:

如果这是主页，则什么都不做，否则，在元素#navbar中添加一类不透明"

"if this is the home page, do nothing, else, add a class of opaque to the element #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);
  });

这里有什么想法吗?就像我说的，我很愿意提出建议.

Any ideas here? Like I said, I am open to suggestion.

推荐答案

好，这是我的解决方案:

Ok, here's my solution:

我创建了一个JS脚本:

I created a JS script:

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

然后我调整了前面发布的if/else:

Then I tweaked the if/else posted earlier:

<?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'); }; ?>

<?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'); }; ?>

因此，如果它是首页(主页)，则会触发滚动上的淡入淡出脚本. 如果是其他页面，则会触发不透明脚本，从而使导航栏在页面加载时可见.

So, if it's the front page (home), the fade on scroll script fires. If it's any other page, the opaque script fires instead which makes the navbar visible on page load.

完成并完成. :)

这篇关于WordPress仅在首页上加载脚本，否则添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！