jQuery исчезновение при прыжках при использовании с наложением - PullRequest
Новая
       51

jQuery исчезновение при прыжках при использовании с наложением

0 голосов
/ 03 августа 2020

На мой сайт добавлена ​​кнопка «прокрутить вниз». Эту кнопку прокрутки вниз я хотел бы постепенно уменьшать непрозрачность по мере того, как я прокручиваю от верхней части страницы. Я столкнулся с двумя проблемами: во-первых, когда я использую стандартное постепенное появление и исчезновение, непрозрачность элементов возрастает по мере перехода к более высокому z-индексу слоя непрозрачности при переходе обратно (при прокрутке вверх), используя это 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);
  }
});

Приветствуется любая помощь при попытке объединить эти два метода, избегая при этом прыгающей непрозрачности, наблюдаемой в коде.

1 Ответ

0 голосов
/ 03 августа 2020

Мы можем получить

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

Нет похожих вопросов

...