仅在访问时显示标题内容

Question

我试图想办法让人们看到了 标题内容仅在全屏显示（无论用户的浏览器屏幕大小有多大或多小）之前 开始向下滚动页面。这就是我的意思。

我希望人们只有在访问网站时才会看到顶部红色边界区域。我涉足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类包装整个标题内容然后从那里开始吗？我对前端开发还是比较陌生的。非常感谢你的帮助！

Answer 1

您可以使用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/