随着 <div> 靠近链接的锚点，降低不透明度答案

【问题标题】：Decrease a <div> opacity as it gets closer to a linked anchor point随着 <div> 靠近链接的锚点，降低不透明度
【发布时间】：2020-08-03 22:14:12
【问题描述】：

我的网站上有一个“向下滚动”按钮，按下该按钮会将您带到指定的锚点。我目前将此按钮设置为淡入和淡出，但这会导致覆盖出现问题并且显得跳跃，我希望拥有它，以便随着您靠近点而逐渐降低不透明度。

我想实现类似的东西：

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

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

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

但是，这似乎不适用于我的代码笔 here。所以我目前正在使用标准的淡入/淡出，当它从覆盖层中弹出时看起来很生涩，这不是我想要的。我想在我的网站中实现上面的代码，但我似乎无法让它工作。

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

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
html {
  scroll-behavior: smooth;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

.godown a {
  position: fixed;
  bottom: 1vh;
  left: 50%;
  z-index: 1;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  font: normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
  opacity: 1;
}

.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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="overlay"></div>
</header>

<body style="background-color: red;">
  <section id="scroller" class="godown">
    <div>
      <a href="#anchor"><span></span>Scroll</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 id="anchor">anchor point</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>

【问题讨论】：

标签： html jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以计算距离：要滚动到的元素到顶部的距离（offsetTop) 和滚动条顶部的 Y 位置。这样，脚本可以评估 top 滚动条的 Y 位置已经通过了要滚动到的元素。这适用于您当前的情况，因为您滚动到了元素的最顶部。

$(document).scroll(function (e) {
    // offsetTop will be computed based on the closest relatively positioned parent element
    // since your anchor has none, this will return distance to document top
    let destination_y = $("#anchor")[0].offsetTop;
    let scrollbar_y = (window.scrollY); // top of scrollbar y position

    // subtract 1 to generate the css opacity level based on ratio
    let opacity = 1 - (scrollbar_y / destination_y); 
    $(".godown").css("opacity", opacity);
});

【讨论】：

谢谢，不过，我只是尝试使用视频标题...它的行为很奇怪。见这里：codepen.io/Darlton29/pen/qBZWeKV
您的视频具有更高的 z-index - 因此它位于 #scroller 之上。只需给 #scroller 元素一个非静态位置 & 和一个更高的 z-index 以便它位于视频元素的顶部