Question

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

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

<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>

Answer 1

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

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

JS隐藏标题元素并在滚动

1 个答案: