缩放导航高度

-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

缩放导航高度

回答

相关问题