"> "> -6ren">
个人中心
gpt4 book ai didi

javascript - 有人可以解释为什么我的 "fixed navigation on Scroll"不工作吗？

转载 作者：行者123 更新时间：2023-11-28 00:51:34 25 4
gpt4 key购买 nike

我希望我的导航在我的 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 网站上的幻灯片放映后得到修复，但是我过去使用的编码似乎不起作用。

最佳答案

看看你的控制台。出现错误: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>

关于javascript - 有人可以解释为什么我的 "fixed navigation on Scroll"不工作吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53189107/

25 4 0
文章推荐： css - 如何将网页保存到文件 - 使用打印样式
文章推荐： javascript - 选择 - 编辑帖子时填充
文章推荐： javascript - 从 JSON 创建内容与数据库 - 效率
文章推荐： html - 溢出 : auto is hiding fixed elements in Firefox
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com