时间戳

首页 > 解决方案 > 减少一个

接近链接锚点时的不透明度

html - 减少一个
接近链接锚点时的不透明度

问题描述

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

我想实现类似的东西：

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

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

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

但是，这似乎不适用于我的 codepen，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>

标签： htmljquerycsstwitter-bootstrapbootstrap-4

解决方案

您可以计算距离：从顶部滚动到的元素的距离（offsetTop)以及滚动条顶部的 Y 位置。这样，脚本可以评估滚动条顶部的 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);
});

推荐阅读