Question

所以我遇到了这个问题，我的导航栏响应屏幕尺寸。

一切看起来都很好，但我需要它是粘性的。每当我这样做时，它会漂浮在我的第一张英雄照片之上，并且在顶部有一个大约40-50像素的部分，我无法摆脱它。

如果有人可以请你帮我一把。它现在已经开了两个星期了。

<header>
    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="index.html">Home</a></li>
            <li><a href="#tl">Teaching and Learning</a></li>
            <li><a href="#ne">News and Events</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
        <a href="#" id="pull">Menu</a>
    </nav>
</header>

    <div class="hero-image first">
        <h1 class="big">Sample Text</h1>
    </div>

<section id="content">
    <div class="container">
        <section id="grid" class="clearfix">
            <div class="grid-6">
                <h1>About Us</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
                type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <a href="about-us.html">Read More</a></p>
            </div>
        </section>
    </div>
</section>


        <a name="tl"><div class="hero-image second"></a>
            <h1 class="big">Sample Text</h1>
        </div>

<section id="content">
    <div class="container">
        <section id="grid" class="clearfix">
            <div class="grid-4">
                <h1>Teaching & Learning</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
                type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
            <div class="grid-2">
                <img src="images/tl.jpg" />
            </div>
        </section>
    </div>
</section>

        <a name="ne"><div class="hero-image third"></a>
            <h1 class="big">Sample Text</h1>
        </div>

<section id="content">
    <div class="container">
        <section id="grid" class="clearfix">
            <div class="grid-2">
                <img src="images/ne.jpg" />
            </div>
            <div class="grid-4">
                <h1>News and Events</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
                type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </section>
    </div>
</section>


        <a name="contact"><div class="hero-image fourth"></a>
            <h1 class="big">Sample Text</h1>
        </div>

<section id="content">
    <div class="container">
        <section id="grid" class="clearfix">
            <div class="grid-2">
                <center><img src="images/2501.jpg" class="rounded" /></center>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
                type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
            <div class="grid-2">
                <center><img src="images/2502.jpg" class="rounded" /></center>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
                type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
            <div class="grid-2">
                <center><img src="images/2503.jpg" class="rounded" /></center>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
                standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
                type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
                essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            </div>
        </section>
    </div>
</section>

        <footer class="grid-full">
          <p>&copy; BHS 2014.</p>
          <p class="right"> Designed by <a href="http://begintoend.com" class="flink">Begintoend</a></p>
        </footer>

高级干杯

Answer 1

所以基本上你必须修改一些东西，因为'教学'不合适。

// This is to fit longer text (Teaching and Learning)
// + padding so it looks nicer
nav a {
   min-width: 150px;
   padding: 0 15px;
}

// Total width needs to be adjusted 
// because we increased the size of navbar (Teaching..)
nav ul {
   width: 1000px;
}

// The gap was caused by h1 element's top margin inside hero
.big {
   margin-top: 0;
}

另外不要忘记调整视口 - 转换菜单的宽度，因为菜单的宽度增加了

需要帮助 - 粘性导航栏

1 个答案: