使固定div内的元素滚动

时间：2017-08-27 21:14:19

标签： html5 twitter-bootstrap css3 twitter-bootstrap-3

在Twitter bootstrap 3上构建网站。

我有一个带有文字，按钮和自己照片的超大屏幕。我希望自己的照片+下面的白色div向上滚动并越过jumbotron。我能够使用z-index获得白色div。

我想要的视觉表现

enter image description here

我的问题是，如何让自己的照片做同样的事情？它继承了包含div的属性，我似乎无法覆盖它。

  1. 即使我放置了更高的z-index，图像的底部也会被白色div切断。

  2. 图像固定，滚动时不动。

    3. 我会提供一个codepen，但这需要一段时间才能完成。这是代码的要点：

    <div class="jumbotron hero">
      <div class="container"> 
        <div class="row row-grid">
          <div class="col-lg-7 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 text-center" id="header-text">
            <h1>Hi, I'm Giovanni.</h1>
            <h3>I'm a Marketing Professional and Public Speaking Coach</h3>
            <div class="btn-toolbar text-center" role="group" id="header-buttons">
              <a href="#marketing" class="btn btn-lg btn-primary" id="primarycta">Marketing</a>
              <a href="#publicspeaking" class="btn btn-lg btn-warning" id="secondarycta">Public Speaking</a>
            </div>
          </div>
          <div class="col-lg-5 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-8 col-xs-offset-2 gio-image"><!--This is the image I want to move -->
          </div>
        </div>
      </div>
    </div>

<div class="container" id="scrollover">

      <div class="row" id="marketing">
        <div class="col-lg-10 col-lg-offset-1 text-center"><h1 class="bodyh1">Marketing</h1></div>
      </div>
      <div class="row">

<!-- Etc... -->

    CSS：

    .hero {
  padding-top:140px;
  height:600px;
  min-height:400px;
  background-size:cover;
  overflow: visible;
  position: fixed;
  right:0;
  left:0;
  z-index:-1;
}

#scrollover {
  position: absolute;
  top: 70%;
  z-index:2;
  background: white;
  width:100%;
}

2 个答案:

答案 0 :(得分：0)

尝试向position:fixed或.row课程提供.row-grid。

您也可以这样做，以便在您开始向下滚动时添加positiong:fixed。

检查this pen。我知道这不是最漂亮的CSS，但它应该让你大致了解我的意思

修改

尝试为您的图片background-attachment:fixed; 

.image {
  background-image: url('https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg');
  background-size:100%;
  height:300px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#other {
  width:50%;
}
<div class="image">

</div>

<section id="other">
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

<section id="other">
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

<section id="other">
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

<section id="other">
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

答案 1 :(得分：0)

我明白了。我不确定我的方法是否是正确的方法，但它确实有效。

我拿了

<div class="col-lg-5 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-8 col-xs-offset-2 gio-image"><!--This is the image I want to move -->
</div>

并将它移到jumbotron div的末尾和#scrollover容器的开头之间。

然后我使用相对定位将它放置在它自然所在的位置的上方和右侧。我给了它一个更高的z-index，所以它会位于两个div的顶部。

通过这种方法，我不得不使用一些媒体查询来确保它与页面的其余部分一起移动并且没有任何内容。但总的来说，它就像一个魅力。

相关问题
最新问题