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

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 。

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

别忘了以与nav相同的高度在您的body上添加padding-top 。 因为导航将固定在顶部，所以您的身体需要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 个解决方案

解决方案1
0 2018-11-07 12:50:15

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

问题描述

1 个解决方案

解决方案1 0 2018-11-07 12:50:15

解决方案1
0 2018-11-07 12:50:15