加载时页面顶部显示视差图像

Question

出于某种原因，我遇到了这个奇怪的 CSS 问题，但我不知道如何解决它。我正在使用 Materialise CSS 框架。当页面加载时，视差元素奇怪地出现在页面顶部。当用户滚动时它会消失。这是我的意思的图片：

http://i.stack.imgur.com/ExRPq.png

有什么想法吗？这是代码：

  .main-container {
      height: 88vh;
      width: 100%;
      padding: 0;
      margin: 0;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 200;
      font-family: Lato;
  }

  .main-container h1 {
    margin-bottom: -5px;
    margin-top: -15px;
  }

  .main-container h5 {
    margin-bottom: 20px;
    font-family: Roboto;
    font-weight: 200;
  }
  #search-box {
    height: 50px;
    width: 500px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    resize: none;
  }

  @media screen and (max-width: 799px) {
      .parallax-dsp {display: none}
  }

这里是 HTML:

<nav class=" yellow darken-4" role="navigation">
  <div class="container">
    <div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">mxious</a>
      <ul id="nav-mobile" class="right side-nav">
        <li><a href="#"><b>Sign in</b> or <b>register &raquo;</b></a></li>
      </ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </div>
  </div>
</nav>

<div class="main-container">
<div class="parallax parallax-dsp"><img class="parallax-dsp" src="https://ununsplash.imgix.net/36/X7L5hgFXQZazzPaK3goC_14084990857_88cabf3b6d_o.jpg?q=75&fm=jpg&s=d8812b80a08b8a04f4cf538f69a13b37"></div>
  <h1>welcome to <logo></logo></h1>
  <h5>Mxious is a social music discovery engine.</h5>
  <input id="search-box" placeholder="type an artist, song, or album name to begin">

提前致谢！

Answer 1

根据您的图片，我假设您希望视差图像位于 nav 的正下方，对吗？…我认为这是固定的。好吧，只要对 main-container 做一个 margin-top:，它就会把它放在 nav 的正下方。

另一种方法是在 main-container 上方添加一个新的 div class="top-fill" 并使其高度为 nav.

编辑：看起来我还没有回答你所有的问题，但我没有使用过那个框架，也没有太多地使用视差，所以我不知道如何解决这个消失的问题。

加载时页面顶部显示视差图像

Parallax image shows at top of page on load

html

javascript

css

jquery

materialize