Question

当容器div中发生滚动时，我想平滑地隐藏标题。因此，我使用translateY而不是margin-top和top来获得更好的平滑度和性能。

在上面的链接中，您可以检查。滚动绿色背景div时，标题将平滑隐藏。但是，我也想将 .ccc和.ddd div也调整到最高位置。

JsFiddle-这是我想要的，但不使用对.css和.ddd的translateY

在上面的链接中，我实现了我想要的。但是，我想实现不对 .ccc和.ddd 类使用任何transform属性。在第二个链接中，我向.css和.ddd类添加了一些硬编码transform: translateY(-35px)。

是否有其他选项可以在不使用translateY来将剩余容器div和页脚div调整为.css和.ddd类的情况下？

Answer 1

我使用高度转换。你还好吗？

$(document).ready(function(){
      $(".ccc").bind('mousewheel DOMMouseScroll', function(event) {        
                      if(event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                		$(".bbb").removeClass("bbbAfter");
                } else {
                		$(".bbb").addClass("bbbAfter");
                }         
        });
  });

* {
  margin: 0;
  padding: 0
}
.aaa {
background: #ccc;
width: 100%;
height: 100vh
}
.bbb {
  background: red;
  width: 100%;
  height: 35px;
  transition: .3s height;
}
.bbbAfter {
  /*transform: translateY(-100%)*/
  height:0;
}
.ccc {
  background: green;
  width: 100%;
  height:300px;
  overflow-y:auto
}
.ddd {
  background: yellow;
  width: 100%;
  height: 20px;
  position: relative
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa">
<div class="bbb">

</div>
<div class="ccc">
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.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.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.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.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.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.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.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.
</div>
<div class="ddd">

</div>
</div>

如果标题隐藏，则调整容器div的位置

1 个答案: