製作一個粘性導航

嗨我正在使用下面的jQuery和CSS來粘貼我的導航菜單到滾動頂部。問題在於我的導航菜單位於100vh div下。 jquery不會接受vh作爲高度量度。任何建議如何使它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"> 
 
    \t <img src="<?php echo get_bloginfo('template_directory');?>/img/es.png"> 
 
    \t <nav class="stickynav"><?php wp_nav_menu(array('theme_location' => 'primary')); ?></nav> 
 
    </header>

來源

2016-12-20 Lisa Jaffé

那麼，如果您真的需要，您總是可以計算*** px ***值爲此使用視口大小：*** 1 vh =視口高度的1/100。***和*** $（window）.height（）***將爲您提供瀏覽器視口。 – Esko

'100vh'等同於窗口高度。嘗試使用'$（window）.height（）' –

-2

喲可以使用這些庫之一：https://github.com/jbutko/stickyNavbar.js或https://github.com/leafo/sticky-kit

來源

2016-12-20 11:40:03 aspirisen

-1

這是在我的網站的貼頭的代碼..希望它可以幫助

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

來源

2016-12-20 11:40:49 Dominion79

代替'290'請記住，如果使用這種技術，當滾動對性能不利時可能會執行更改，並且可能會導致滾動結果。爲了提高性能，你可以使用[requestAnimationFrame]（https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame）。 – MateBoy

@mateBoy我沒有注意到任何性能問題..但感謝您的意見，我會看看您的建議技術。 :) – Dominion79

css最近介紹位置：sticky;我認爲這會對你的網站有所幫助，因爲你不需要使用任何javascript來使它工作。但由於它有多麼新，它不適用於所有瀏覽器，並且不適用於未更新的瀏覽器（許多人使用舊版瀏覽器）

來源

2016-12-21 13:29:26

製作一個粘性導航

回答

相關問題