I would like my navigation to be fixed after a slideshow on my wordpress site, however the coding I have used in the past does not appear to be working.
The website in question is:
The Code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
<script src="https://use.typekit.net/gbc6dao.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.j s"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type='text/javascript'>
// Sticky nav
var nav = $('stick');
var navHomeY = nav.offset().top;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if ($(this).scrollTop() > navHomeY){
nav.addClass("fixed-nav");
}
else{
nav.removeClass("fixed-nav");
}
});
</script>
<style>
.fixed-nav {
position: fixed;
top: 0;
z-index: 1001;
width: 100%;
}
#stick.fixed-nav {
background-color: rgba(255, 255, 255, 1);
position: fixed!important;
top: 0;left: 0; right: 0;
top: 0;
width: 100%;
z-index: 50000!important;
}
</style>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'before' ); ?>
<?php if( is_page( 'Home' ) ) { ?>
<div class="cb-slideshow-container">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>OWNER OF A SMALL BUSINESS?</h3> </div></li>
<li><span>Image 02</span><div><h3>OR TRADIE,<br>
LOOKING TO GO IT ALONE?</div></li>
<li><span>Image 03</span><div><h3>DON'T KNOW<br>
WHERE TO START...</h3></div></li>
<li><span>Image 04</span><div><h3>WE CAN HELP</h3></div></li>
<li><span class="toe">Gerrilla</span></li>
</ul>
</div>
<?php } ?>
<header class="site-header" role="banner">
<nav id="stick" class="site-navigation">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only"><?php _e('Toggle navigation','_tk') ?> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Your site title as branding in the menu -->
<?php if ( get_theme_mod( 'andys_logo' ) ) : ?>
<div class='site-logo'>
<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'> <img src='<?php echo esc_url( get_theme_mod( 'andys_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'> </a>
</div>
<?php else : ?>
<hgroup>
<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
<h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php endif; ?>
</div>
<div class="getstartedn-wrap">
<a href="http://www.guerrilla.nz/contact-us/">
<div class="nav-getstarted getstarted-button">GET STARTED</div>
</a>
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'nav',
'container_id' => 'navbar-collapse',
'container_class' => 'collapse navbar- collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
</div> <!--<div style="background-color:#000; height:30px; color:#000;"> dsfsf</div> -->
</div><!-- .container -->
</nav><!-- .site-navigation -->
</header><!-- #masthead -->
I would like my navigation to be fixed after a slideshow on my wordpress site, however the coding I have used in the past does not appear to be working.
Just take a look at your console. There's an error: Uncaught TypeError: Cannot read property 'top' of undefined
.
It's pretty simple. Get the outerHeight
of the slideshow element and then apply the sticky class to your nav if this specific height is reached.
Don't forget to add a padding-top
to your body
with the same height of your nav
. Because your navigation will be fixed at the top, your body needs a padding-top
.
Here's a simple example:
$(window).scroll(function() { var slideshow = $('.slideshow').outerHeight(); var nav = $('nav'); if ($(window).scrollTop() >= slideshow) { nav.addClass('sticky'); } else { nav.removeClass('sticky'); } });
html, body { padding: 0; margin: 0; } .slideshow { width: 100%; height: 200px; background: blue; } nav { width: 100%; height: 50px; background: red; } .sticky { position: fixed; top: 0; left: 0; right: 0; } main { /* Get some space */ min-height: 800px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slideshow"> <p> Just for testing </p> </div> <nav> <p> Just to demonstrate it </p> </nav> <main> <p> Just to get some space </p> </main>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.