Question

我正在处理一个标题，当您向下滚动页面时，该标题出现了很好的不透明度过渡。但是，虽然我能够使它出现和消失，但过渡效果却不起作用。这是我的代码：

$(document).ready(function() {
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    if (top > 50) {
      document.getElementById('transhead').style.display = "block";
      document.getElementById('transhead').style.opacity = "1";
      document.getElementById('transhead').style.transition = "opacity 0.5s ease-out";

    } else {
      document.getElementById('transhead').style.display = "none";
      document.getElementById('transhead').style.opacity = "0";
      document.getElementById('transhead').style.transition = "opacity 0.5s ease-out";
    }
  });
});

.headera {
  overflow: hidden;
  background-color: #111;
  padding: 10px 10px;
  height: 15vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='transhead' class='headera' style='display: none; position: fixed; top:0; left: 0; z-index: 10000; height: 5vh; width: 100%; background-color: blue;'>TEST</div>
I need some text to allow scrolling...
<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)<br>:)

如果有人可以告诉我怎么了，我将非常感激。

用JavaScript转换部分不可见的对象吗？

0 个答案: