Question

我希望在wordpress网站上进行幻灯片放映后修复导航，但是我过去使用的编码似乎不起作用。

有问题的网站是

www.guerrilla.nz

代码：

<!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;">&nbsp;dsfsf</div> -->
</div><!-- .container -->
</nav><!-- .site-navigation -->

</header><!-- #masthead -->

我希望在wordpress网站上进行幻灯片放映后修复导航，但是我过去使用的编码似乎不起作用。

Answer 1

只需看看您的控制台即可。发生错误：Uncaught TypeError: Cannot read property 'top' of undefined。

这很简单。获取幻灯片元素的outerHeight，如果达到此特定高度，则将粘性类应用于导航。

请不要忘记在padding-top上添加body高度的nav。因为导航将固定在顶部，所以您的身体需要padding-top。

这是一个简单的例子：

$(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>

有人可以解释为什么我的“滚动固定导航”不起作用吗？

1 个答案: