时间戳

首页 > 解决方案 > jQuery在与overlay一起使用时淡入淡出

html - jQuery在与overlay一起使用时淡入淡出

问题描述

我在我的网站上添加了一个“向下滚动”按钮。这个向下滚动按钮我希望从页面顶部滚动得越远，不透明度就会逐渐降低。我面临两个问题 - 首先，当我使用标准淡入和淡出时，项目不透明度会在淡入（向上滚动时）传递到不透明度层的较高 z-index 时跳跃，使用此 js：

$(window).scroll(function() {

  if ($(this).scrollTop()>0)
  {
    $('.godown').fadeOut();
  }
  else
  {
    $('.godown').fadeIn();
  }
});

这是代码笔

然后我尝试实现它，以便离顶部越远，它会越渐进地降低不透明度 - 希望尝试解决跳跃问题。但是，我根本无法让这段代码工作：

var target = $('.godown'),
  targetHeight = target.outerHeight();

$(document).scroll(function(e) {
  var scrollPercent = (targetHeight - window.scrollY) / targetHeight;

  if (scrollPercent >= 0) {
    target.css('opacity', 1 - scrollPercent);
  }
});

任何有助于尝试结合这两种方法的帮助，同时避免在代码笔中看到的跳跃不透明度。

标签： htmljquerycssbootstrap-4

解决方案

我们可以得到

  • 页面高度
  • 我们的位置（一开始将是最大值并下降）
  • 在滚动时，通过将位置划分为文档高度来获得一个因子
  • 我们可以四舍五入这个数字（不是必需的）
  • 使用这个数字作为不透明度（这永远不会大于 1 或小于 0）
  • 您可以根据自己的喜好进一步调整此数字

工作片段：

$(window).scroll(function() {

  var docHeight = document.documentElement.scrollHeight;
  var x = docHeight;
  var pos = document.body.getBoundingClientRect().bottom;
  var opacity = docHeight - pos;

  x = pos / docHeight;
  document.getElementById("anchorP").innerHTML = x.toFixed(2);
  $('a').css('opacity', x);

});
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
.godown a {
  position: fixed;
  bottom: 1vh;
  left: 50%;
  display: inline-block;
  color: #fff;
  font: normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
}

.godown a:hover {
  opacity: .5;
}

#scroller a {
  padding-top: 60px;
}

#scroller a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body style="background-color: red;">
  <section id="scroller" class="godown">
    <div>
      <a href="#anchor"><span></span>Scroll <p id ='anchorP'><p></a>
    </div>
  </section>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
</body>

推荐阅读