縮放導航高度

-1

我想創建，生長，當你在屏幕的頂部，萎縮，因爲你向下滾動（流行在許多網站的導航。縮放導航高度

我有一個例子，我發現這是接近我想要的

http://jsfiddle.net/seancannon/npdqa9ua/

我的HTML

<div class="container-fluid"> 
<div class="row"> 

    <div class="col-md-12" data-0="opacity:1;" data-75="opacity:0;"> 

    <nav class="navbar navbar-custom" role="navigation"> 

     <!-- Brand and toggle get grouped for better mobile display --> 

      <div class="navbar-header"> 

       <a class="navbar-brand" href="<?php echo home_url(); ?>"></a>   

       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

      </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 

      <div class="collapse navbar-collapse navbar-right"> 
       <?php /* Primary navigation */ 
        wp_nav_menu(array(
        'menu' => 'top_menu', 
        'depth' => 2, 
        'container' => false, 
        'menu_class' => 'nav navbar-nav', 
        //Process nav menu using our custom nav walker 
        'walker' => new wp_bootstrap_navwalker()) 
        ); 
       ?> 
      </div> 
    </nav> 

     <div class="hr"></div> 

    </div> 

</div><!-- /row --> 
</div><!-- /container -->

我希望它用的響應我的工作我正在使用的WordPress和Bootstrap 3默認導航。將高度添加到我當前的導航將停止打開移動導航。我寧願沒有定義的高度，我當前的nag默認高度是基於填充上下的鏈接。

來源

2015-07-19 user3550879

你只想改變'height'嗎？ –

是的，我已經看到很多網站頂部的標題很大，然後當您向下滾動時，它變成了頂部的窄條。我想要類似的，最終我會有我的標誌成長/收縮 – user3550879

HTML

<body> 
    <nav> <!-- menu elements --> </nav> 
</body>

CSS

nav {    
    height: 200px; 
    width: 100%; 
    transition: height .5s; 
} 

nav.small { 
    height: 50px; 
    position: fixed; 
    top: 0; 
}

var $window = $(window), 
    $menu = $('nav'), 
    windowWidth = $window.width(); 

$window.on('scroll', function(e) { 
    if (windowWidth < 768) // maybe you calculate the width on `resizing` event 
      return; 
    var y = $window.scrollTop(); 
    if (y > 0 && $menu.hasClass('small')) 
     return; 
    $menu.toggleClass('small', y > 0); 
});

只是一個想法，希望這幫助。

UPDATE

只要你需要保護代碼< 768px，你可以使用modernizr，如果用戶使用手機辦理登機手續，不運行的代碼。或自己計算window width。（如我添加到代碼中）

來源

2015-07-19 11:26:09

我可以把它放在我的functions.php中。或者是否需要進入另外，我會盡快給出這個答案，如果有效，我會確保接受它。謝謝 – user3550879

哪部分？我沒有提供任何嚴重的代碼。你需要在我的代碼中添加'CSS'＆'JS'部分，看看是否適合你。 –

js部分。我使用Wordpress和我的大部分功能都在functions.php文件 – user3550879

我會切換基於屏幕位置的一類「短路」。（JS上添加/刪除滾動類）

在CSS中我會使用CSS3過渡（高度）來獲得增長的效果。

我會使用@media僅在比您的設置手機大小更大的瀏覽器（最小寬度）上才能獲得此效果。

來源

2015-07-19 11:09:21

縮放導航高度

回答

相關問題