html - 仅在访问时显示标题内容

我正在尝试思考人们如何看待
标头内容仅在全屏显示（无论用户的浏览器屏幕大小是多大或小）之前
开始向下滚动页面。这就是我的意思。



我希望人们仅在访问网站时才能看到顶部的红色边框区域。我迷上了vh或vw，但是我不确定这是否是解决此问题的正确方法。

<header class="header-wrapper">
        <div class="logo">
          <h3>Idealogic</h3>
        </div>
        <div class="login">
          <a href="#"><p>Log In</p></a>
        </div>
        <div class="signup">
          <a href="#"><p>Sign Up</p></a>
      </header>

      <section>
          <h3 class="welcome">
            You Think. <br /><p class="indent">We Design.</p>
          </h3>
      </section>
    </div>

      <!-- Nav Wrapper !-->
      <div class="nav-wrapper">
        <nav>
          <ul>
            <a href="#"><li>Home</li></a>
            <a href="#"><li>How does it work?</li></a>
            <a href="#"><li>Pricing</li></a>
            <a href="#"><li>Education Discouts</li></a>
            <a href="#"><li>Contact Us</li></a>
          </ul>
        </nav>
    <!-- Nav Wrapper Ends !-->
  </div>

这是标题html部分。我应该用div类包装整个标头内容，然后从那里去吗？我是前端开发的新手。非常感谢你的帮助！

最佳答案

您可以使用jQuery确保<section>填充视口的高度，然后从viewportHeight中减去标头和导航。不要使用vw或vh，因为它们没有最大的浏览器支持。

jQuery('section').height(viewportHeight - 100);
//The - 100 is the amount of pixels to subtract. This should equal the height of the header-wrapper and nav-wrapper.

这应该为您工作。我还建议将您的<a>元素放在HTML的<li>元素内。



否则，您可以使用HTML和CSS并使用绝对位置来完成此操作。

http://jsfiddle.net/9jL0mLqp/