jquery - 使用位置固定时防止溢出

Question

我在重叠两个 div 时遇到了一个烦人的问题。我正在使用视差 js 作为响应式背景，顶部还有一个超大屏幕(bootstrap 3)。当我向下滚动页面时，超大屏幕会跟随并溢出到下面的内容上。我想让超大屏幕保持在我的视差背景之上。抱歉，如果这听起来令人困惑，我不是一个放弃的人，但我可能已经咬得太多了，哈哈。非常感谢任何帮助:-) 谢谢

到目前为止的代码:

 HTML:

  <div class="jumbotron"> 
    <div class="row text-center">

            <h1>Fashionable Fondants</h1>
            <h3>"developing your <span>creative side"</span></h3>
            <a href="about.html" class="btn btn-primary btn-lg">Who We Are</a>
        </div>

               </div><!-- end jumbotron -->
                <div class="bg" data-ibg-bg="img/bg.jpg"> 
                        </div><!-- end bg --> 

CSS:

    .bg {
      height: 760px;
      width: 100%;
      margin: none;
      background-repeat:no-repeat;
      overflow: hidden;}

     .jumbotron{
       position: fixed;
       background: none;
       max-height: 800px;
       padding: 0px 0;
       z-index: 2;
       width: 100%;
       margin-top: 10%;}

我使用的 Parallax 插件可以在这里找到:https://github.com/peachananr/interactive_bg

Answer 1

您已将超大屏幕设置为 position:fixed。所以它正在做你要求它做的事情。您必须删除 position:fixed。

现在，如果您希望将超大屏幕放置在屏幕高度的前 100% 处，则创建一个假容器。将 html 和 body 高度设置为 100%。将假容器设置为相对位置，这样您就可以将超大屏幕放置在其中。

html, body {
    height:100%;
}
.fake-body { height:100%; position:relative; }
.jumbotron {
    background: none;
    height: 400px;
    width: 100%;
    position:absolute; top:50%; margin-top:-200px;
}

https://jsfiddle.net/L0fd14y2/7/

供引用:https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/