JS隐藏标题元素并在滚动时调整导航栏的大小答案

【问题标题】：JS Hide header elements and resize navigation bar on scrollJS隐藏标题元素并在滚动时调整导航栏的大小
【发布时间】：2017-05-13 03:43:46
【问题描述】：

我有一个网站的大标题部分，分为三个部分；社交链接、徽标，然后是导航栏。我试图弄清楚如何隐藏前两个元素并调整导航栏的大小并在用户滚动过去时将其固定。

导航栏目前只包含一个链接，该链接将打开一个单独的侧面菜单，其中包含所有实际页面导航。

https://jsfiddle.net/cxekxrxy/2/

<header>
    <!-- social links -->
    <div id="social" class="social-header">
        <div class="container">
            <div class="row">
                <ul>
                    <li class="social-icon"><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
                    <li class="social-icon"><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
                    <li class="social-icon"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                    <li class="social-icon"><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- logo -->
    <div id="logo" class="logo-header">
        <div class="container">
            <div class="row">
                <h1 class="logo-main">Main Header</h1>
                <h2 class="logo-sub">Sub Header</h2>
            </div>
        </div>
    </div>
    <!-- Navigation -->
    <div id="header" class="main-header">
        <div class="container">
            <div id="bars"><a href="#"><span class="glyphicon glyphicon-menu-hamburger text-right" id="nav-bars" style="font-size:25px; cursor:pointer" onclick="openNav()"></span></a></div>
        </div>
        <!-- nav links (hidden until <span> is pressed) -->
        <div id="main-nav" class="side-nav"> 
            <a href="javascript:void(0)" class="btnClose" onclick="closeNav()">&times;</a>
            <a href="default.aspx"><span class="glyphicon glyphicon-home"> Home</span></a>
            <a href="#"><span class="glyphicon glyphicon-user"> About</span></a>
            <a href="#"><span class="glyphicon glyphicon-picture"> Portfolio</span></a>
            <a href="#"><span class="glyphicon glyphicon-envelope"> Contact</span></a>
        </div>
    </div>
</header>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以根据需要查看这个简洁的示例： https://css-tricks.com/scroll-fix-content/ 并使用您的代码。

这是CSS和JS的结合，也是最简单的解决方案 .

【讨论】：