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.
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:
"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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
