Bootstrap 轮播固定位置

Question

我想让我的引导轮播滑块保持固定在顶部，所以当我向下滚动时，我希望下面的内容覆盖轮播滑块，而不是轮播与其他内容一起向上移动。这是一个普通的 Bootstrap Carousel 滑块。

    <div class="carousel slide" data-ride="carousel" id="carousel-ex">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
</ol>

    <div class="carousel-inner">
    <div class="item active">
    <img src="pics/cheese_and_biscuits.jpg" alt="image">
    <div class="carousel-caption">
    <h2>Djathi Shajshet!</h2>
    <p>Djathi paragraf</p>
    </div>
    </div>

    <div class="item">
    <img src="pics/cheese.jpg" alt="image">
    <div class="carousel-caption">
    <h2>Djathi Shajshet!</h2>
    <p>Djathi paragraf</p>
    </div>
    </div>

    <div class="item">
    <img src="pics/cheeseboard.jpg" alt="image">
    <div class="carousel-caption">
    <h2>Djathi Shajshet!</h2>
    <p>Djathi paragraf</p>
    </div>
    </div>
    <a href="#carousel-ex" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#carousel-ex" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div> </div>

CSS

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}

Answer 1

试试下面的代码，希望它能满足你的要求。

CSS 代码

<style type="text/css">
    body { 
     min-height: 1500px;
    }

    .carousel{
      position: fixed;
    }

   #myContents { 
       position: relative; 
       padding: 550px; /* your carousel image size + 30px */ 
       z-index: -1;
   }
</style>

HTML 代码：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    ........
     <!-- put carousel remaining code here -->
    ........
</div> <!-- #myCarousel ends -->

<div id="myContents" class="row">
    ....
    <!-- put all remaining contents here -->
    ....
</div> <!-- #myContents ends -->

注意：如果您希望内容在轮播上滚动，则将 z-index 设为正数。