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

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>填充视口(viewport)的高度，然后从视口(viewport)高度中减去标题和导航。不要使用 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> <li> 中的元素HTML 中的元素。

---

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

http://jsfiddle.net/9jL0mLqp/