Question

您好我正在使用以下jquery和css将我的导航菜单粘贴到滚动顶部。问题是我的导航菜单位于100vh div下。 jquery不接受vh作为高度测量。关于如何制作的任何建议？

$(function(){
        $(window).scroll(function() {
            if ($(this).scrollTop() >= 290) {
                $('nav.stickynav').addClass('stickytop');
            }
            else {
                $('nav.stickynav').removeClass('stickytop');
            }
        });
    });

.stickynav.stickytop {
        position:fixed;
        top:0
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header class="group">
    	<img src="<?php echo get_bloginfo('template_directory');?>/img/es.png">
    	<nav class="stickynav"><?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?></nav>
    </header>

Answer 1

css最近介绍的位置：粘性;我认为这对您的网站有帮助，因为您不需要使用任何JavaScript来使其正常工作。但由于它有多新，它不适用于所有浏览器，也不适用于未更新的浏览器（许多人使用旧浏览器）

Answer 2

这是我网站上贴纸标题的代码..希望有所帮助

$(function() {
  /* Sticky Header */
  $(window).scroll(function(){
    var sticky = $('.header'),
    scroll = $(window).scrollTop();
    if (scroll >= 100){
      sticky.addClass('fixed');
      sticky.fadeIn();
    } else {
      sticky.removeClass('fixed');
      sticky.removeAttr("style");
    }
  });
});

/* Header */

header.header {
  background: #000;
  padding: 1em;
  box-sizing: border-box;
}

header.header.fixed {
  position: fixed;
  width: 100%;
  display:none;
  top: 0px;
  left: 0px;
  z-index: 202;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
  <div class="container">
    <nav class="main-menu" id="mm">
      <ul>
        <li><a href="#" title="#">Home</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 3

Yo可以使用其中一个库：https://github.com/jbutko/stickyNavbar.js或https://github.com/leafo/sticky-kit

制作粘性导航

3 个答案: