Question

我正在尝试创建一个在屏幕顶部增长的导航，并在向下滚动时缩小（在许多网站上流行。

我有一个例子，我发现它接近我想要的

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-default高度是基于链接上方和下方的填充。

Answer 1

我会切换一个班级＆＃34; .short＆＃34;基于屏幕位置。（JS在滚动上添加/删除类）

在css中我会使用css3 transition（height）来获得增长效果。

我会使用@media仅在比您设置的移动尺寸更大（最小宽度）的浏览器中获得此效果。

Answer 2

<强> HTML

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

<强> CSS

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

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

<强> JS

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);
});

只是为了一个想法，希望这有帮助。

<强>更新

只需要保护代码免受＆lt; 768px，您可以使用modernizr并检查用户是否使用移动设备，不要运行该代码。或者自己计算window width。（正如我添加到代码中）

根据页面位置缩放导航高度

2 个答案: