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

【问题标题】：Scaling navigation height based on page location根据页面位置缩放导航高度
【发布时间】：2015-10-08 13:40:39
【问题描述】：

我正在尝试创建一个导航，当您位于屏幕顶部时会增大，向下滚动时会缩小（在许多网站上都很流行。

我发现一个例子与我想要的很接近

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

【问题讨论】：

你想只对height进行更改吗？
是的，我见过很多网站顶部的标题很大，然后当您向下滚动时，它会变成顶部的窄条。我想要类似的，最终我会让我的标志变大/缩小

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

我会根据屏幕位置切换“.short”类。（JS在滚动时添加/删除类）

在 css 中我会使用 css3 过渡（高度）来获得增长的效果。

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

【讨论】：

【解决方案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;
}

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

仅供参考，希望对您有所帮助。

更新

只要你需要保护代码不受 modernizr 并检查用户是否使用移动设备，不要运行代码。或自己计算window width。（正如我添加到代码中）

【讨论】：

我可以把它放在我的functions.php中吗？或者这需要进入另外我会尽快尝试一下，如果它有效，我会确保接受它。谢谢
哪一部分？我没有提供任何服务器端代码。您需要在我的代码中添加 CSS 和 JS 部分，看看是否适合您。
js部分。我正在使用 Wordpress，我的大部分功能都在 functions.php 文件中
你有js文件吗？我认为您应该将该行添加到 js 文件并链接到页面，或者将该代码块添加到 HTML 端，可能在或其他地方。（请注意，如果您将代码添加到部分，请同时添加 document.ready）
np 兄弟，如果有问题，请随时在此处添加评论，我会尽快回复！