Уменьшайте непрозрачность <div>по мере приближения к связанной точке привязки - PullRequest
Новая
       48

Уменьшайте непрозрачность <div>по мере приближения к связанной точке привязки

1 голос
/ 04 августа 2020

У меня есть кнопка «прокрутки вниз» на моем веб-сайте, при нажатии на которую вы перейдете к указанной точке привязки. У меня сейчас эта кнопка настроена на постепенное появление и исчезновение, но это вызывает проблемы с наложением и выглядит скачкообразно, и я хотел бы, чтобы прозрачность постепенно уменьшалась по мере приближения к точке.

I хотел бы реализовать что-то подобное: 

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

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

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

Однако, похоже, это не работает с моим кодом, здесь . Итак, в настоящее время я использую стандартное наложение / затухание, которое выглядит отрывистым, когда появляется через оверлей, и это не то, что я хочу. Я хотел бы внедрить приведенный выше код на свой сайт, но не могу заставить его работать. 

$(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>

1 Ответ

1 голос
/ 04 августа 2020

Вы можете вычислить расстояние: расстояние до элемента, до которого нужно прокрутить сверху (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);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...