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

从你的图片中，我假设你希望parralax图像正好位于nav右下方？...我认为这是固定的。好吧，只需margin-top: main-container即可，它会将其放在nav下方。

另一种方法是在div class="top-fill"之上添加新的main-container，并将其设为nav的高度。

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

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

1 个答案: