Question

我对div的z-index有问题。有两个固定位置的div。幻灯片的z-index为2，最初位于屏幕顶部。在滚动直到data-top-start-2001之前，我想将幻灯片的z-index更改为1，然后向后移动，并使用z-index在顶部使另一个div内容...

可以通过z-index来解决
这可以通过不透明度来解决

建议我解决问题的方法

这是我到目前为止制作的链接https://jsfiddle.net/altafhpatel/urk7sb5a/14/

$(document).ready(function() {
  var s = skrollr.init({

    smoothScrolling: true,
    smoothScrollingDuration: 500,
    render: function(data) {
      //Log the current scroll position.
      document.querySelector('.poss').innerHTML = data.curTop;
    }
  });
})

html,
body,
.h100 {
  height: 100%;
}

body {
  font-family: Roboto, 'sans-serif';
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Exo', sans-serif;
}

.slide {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

.ohidden {
  overflow: hidden;
}

.heading-wrapper {
  margin: 30px auto;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0
}

.main-heading {
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.sub-heading {
  font-size: 15px;
  line-height: 24px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.sub-heading .stripe {
  text-shadow: none;
  word-spacing: 3px;
  letter-spacing: 1px;
  padding: 3px 5px;
  font-weight: bold;
  font-size: 12px;
  background: #bca130;
  color: #000;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Skroll Tempaltes</title>


    <link href="https://fonts.googleapis.com/css?family=Exo:300,400,600,700,800|Roboto:400,700,800" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  </head>

  <body>
     <div class="container-fluid h100 " style="z-index:2;opacity:1;top:0;left:0;right:0;bottom:0;margin-right:auto;margin-left:auto;width: 100%;" 
  data-0-start="position:fixed;" 
  data-2001-start="z-index:1">
    <div class="row h100 ">

      <div class="slides h100" >

        <div class="slide slide1"  style="background-image:url(http://www.al-khair.org/img/3.jpg);background-repeat no-repeat;background-position: center center;background-size: cover;"  
        >
       </div>

        <div class="slide slide2" style="background-image:url(http://www.al-khair.org/img/2.jpg);background-repeat no-repeat;background-position: center center;background-size: cover;" 
        data-1000-start="width:100%;" 
        data-2000-start="width:0%;"
        >
        </div>

        <div class="slide slide3" style="background-image:url(http://www.al-khair.org/img/1.jpg);background-repeat no-repeat;background-position: center center;background-size: cover;" 
        data-500="width:100%;" 
        data-1000="width:0%;" >

          <div class="heading-wrapper text-center text-uppercase"
          data-500-start="position:fixed;" 
          data-600-start="top:0"  >
            <h2 class=" main-heading animated fadeIn slow text-light"
             >Al-Khair Hajj <span class="sr-only">2019</span> & Umrah <span class="sr-only">2019</span></h2>

            <h3 class="h4 sub-heading text-light">Your Premium Partner in <br>
            <span class="stripe">Hajj <span class="sr-only">Packages 2019</span> & Umrah <span class="sr-only">Packages 2019</span> since 1992</span>
            </h3>
            </div>

          </div>
      </div><!-- slide -->

    </div> <!-- row -->
  </div>

  <div class="container-fluid h100" style="z-index:1;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);" 
  data-2001-start="position:fixed" 
  data-2500-start="z-index:2">
    <div class="row h100">
      great contetn
    </div>
  </div>

    <div class="body-inner ">

      <div class="poss" style="position:fixed;top:0;right:0;opacity:1;background-color: #ccc;padding: 3px;font-size: 12px;z-index: 5">sdf</div>

    </div>
    <!-- body inner -->
  </body>

</html>

使用skrollr JS更改元素的z-index

0 个答案: