Question

我有三个固定的元素，当它们到达页面中的某个部分时，我希望它们转换到下一个元素，但不仅仅是消失和改变。在分歧处，我希望能够看到顶部固定元素的一半和底部固定元素的一半。 EX：如果顶部元素是红色而底部元素是蓝色，那么在分界处我应该看到一个半红色和半蓝色的框。

这是我到目前为止所拥有的，但是现在每个元素都消失了，我希望它看起来在下一个固定元素下滑动。（我用z-index搞砸了，但这个解决方案不起作用b / c两个项目都固定在同一个地方）

HTML：

CSS：

<body id="body">

  <div id="background">
  </div>

  <div id="red">
    <div class="fixedContainer" id="something">
      This is Just a test
    </div>
  </div>

  <div class="mdl-grid" id="blue">
    <div class="fixedContainer2" id="something2">
      This is Just a test2
    </div>
  </div>

  <div class="mdl-grid" id="green">
    <div class="fixedContainer3" id="something3">
      This is Just a test3
    </div>
  </div>

JS

#background {
  height: 900px;
  background-color: black;
  z-index: 1;
}

#red {
  height: 900px;
  background-color: red;
}

#blue {
  height: 900px;
  background-color: blue;
}

#green {
  height: 900px;
  background-color: green;
}

.fixedContainer {
  z-index: 10;
  position: fixed;
  background-color: #ddd;
  padding: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fixedContainer2 {
  z-index: 5;
  position: fixed;
  background-color: #ffff00;
  padding: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fixedContainer3 {
  position: fixed;
  background-color: #dd1144;
  padding: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/zs4emw00/4/

Answer 1

以下是https://jsfiddle.net/zs4emw00/5/

您创建一个整体容器并将该容器设置为overflow: hidden; 然后将fixedContainer设置为position:absolute。 jquery部分始终将所有fixedContainer保留在窗口的顶部。

HTML：

  <div id="background">
  </div>

  <div id="red" class="container">
    <div class="fixedContainer" id="something">
      This is Just a test
    </div>
  </div>

  <div class="mdl-grid container" id="blue" >
    <div class="fixedContainer" id="something2">
      This is Just a test2
    </div>
  </div>

  <div class="mdl-grid container" id="green">
    <div class="fixedContainer" id="something3">
      This is Just a test3
    </div>
  </div>

CSS：

#background {
    height:900px;
    background-color: black;
    z-index: 1;
}
.container{
    position:relative;
    height:900px;
    overflow:hidden;
}
#red {
    background-color: red;
}

#blue {
    background-color: blue;
}

#green {
    background-color: green;
}

.fixedContainer {
    z-index: 10;
    position:absolute;
    background-color:#ddd;
    padding: 2em;
    left: 50%;
    top: 0;
    transform: translate(-50%);
}

的Javascript

$(document).scroll(function() {
    var $target = $('container');
  var winHeight = $(window).scrollTop();
  var offsetArr = $('.container').each(function(){
    var top = $(this).offset().top;
    var difference = winHeight - top;
    $(this).find('.fixedContainer').css('top',difference);
  })

});

如何使固定的元素在非固定元素后面消失

1 个答案: