Question

我正在使用zurb基础，我想创建一个具有结构和滚动效果的网页，如one。我有一个这样的html结构：

<html lang="en">

<head>
 ...
</head>
<body>
  <div class="off-canvas-wrapper">
      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
        <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
        ...
        </div>

        <div class="off-canvas-content" data-off-canvas-content>
          <div id="app">

            <!-- should be below the screen height --> 
            <div id="drawer">
              <div id="magazine-detail">
                 ...
              </div>
              <div id="magazine-detail-carousel">
                ...
              </div>
            </div>

            <!-- the background image of the main-section -->
            <div id="bg">
            </div>


            <!-- should take up the screen on the page load and start going below drawer on scroll down, on the z-axis -->    
            <div id="main-section">

              <!-- sticky fixed top-bar -->
              <div id="top-bar">
                ...
              </div>

              <div id="header">
                ...
              </div>

              <div id="carousel">
                ...
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

</body>
</html>

由于我需要对背景图片进行放大效果，我设置了div #bg，如下所示：

#bg {
  background-image: url('/img/cover.png');
  background-size: cover;
  z-index: -1;
  animation: zoom 10s;
  height: 100vh;
  width: 100vw;
  position: static;
  -webkit-animation-fill-mode: forwards;
}

@keyframes zoom {
  0% { transform:scale(1,1); }
  100% { transform:scale(1.1,1.1);}
}

自从我在示例网页中看到，在chrome中检查时，主页面内容（在我的情况下为#drawer）会被margin-top向下推到屏幕底部，我试过这个：

#drawer {
  margin-top: 100vh;
  position: relative;
  z-index: 5;
}

但这显然不是很好，因为当我拥有它时，我无法看到高于#drawer的其他div的内容，因为边距占据了空间的颜色。并且margin-top = 100vh还有一个原因，我不能使用jQuery scrollTop来处理不可见的div。

至于主要部分，在这种情况下对我来说是#front-slider在示例页面中的内容，它需要位于#bg div的顶部，以便{{1 divs background-image用作#bg的背景。我必须制作div main-section，以便在放大背景图像时，我可以在背景图像上放大效果，同时不缩放#bg。

对于main-section，我只需要像粘性顶栏一样位于顶部。

我不确定如何定位所有这些以获得与示例所示的页面相同的效果和结构，我已经尝试了每个可能的CSS位置但没有任何效果。

更新

我已成功使用this。

CSS - 定位div

0 个答案: