Question

不确定如何实现我想在这里做的事情，希望你们能帮忙。我的function.js文件中有一个脚本，当页面向下滚动到某一点时，我的固定标题会淡入视图。

我希望这个脚本在主页上工作，但我希望在所有内部页面上永久显示标题。

我确定这需要将这个脚本分解到它自己的文件中并稍稍改变它，但我愿意接受建议。

我最初的想法是让脚本按照预期在主页上运行，但是创建一些其他/如果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);
  });

这里有什么想法吗？就像我说的那样，我愿意接受建议。

Answer 1

您可以在主页的正文中添加课程。并根据需要为其他页面布置.bg固定位置：

<body class="home">

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

Answer 2

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(); ?>>

Answer 3

好的，这是我的解决方案：

我创建了一个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'); }; ?>

因此，如果它是首页（主页），则滚动脚本上的淡入淡出会触发。如果它是任何其他页面，则会触发不透明脚本，这会使页面加载时导航栏显示。

完成并完成。：）

WordPress仅在主页上加载脚本，否则添加类

3 个答案: