Как в js сделать ссылку верхнего блока не кликабельной при fixed со скроллингом?

Question

[Шигаев.]

У меня есть рабочий джаваскрипт, реализующий наезд на верхний блок. Он с fixed. При скроллинге контента, блок плавно исчезает. Однако, в блоке есть ссылки, которые остаются кликабельными. В результате, случайный клик по исчезновшему блоку, приводит к переходам по его ссылкам. Возможно ли сделать их не кликабельными в начале процесса скроллинга?

Скрипт:

function setOpacityOnScroll(className, scrollThreshold) {
  var elements = document.getElementsByClassName(className);
  Array.from(elements).forEach(function(element) {
    window.addEventListener('scroll', function() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var opacity = 1 - (scrollTop / element.offsetHeight);
      opacity = Math.max(0, Math.min(1, opacity));
      element.style.opacity = opacity.toString();
      if (scrollTop >= scrollThreshold) {
        element.style.opacity = '0';
      }
    });
  });
}
setOpacityOnScroll('aetitisy-site-header', 200);

Скрипт предоставил уважаемый batowski

Comments

[Ankhena]

JS
.preventDefault()

CSS
visibility
pointer-events

[Шигаев.]

Ankhena, буду признателен за полный код. Если в CSS для меня секретов нет, то js — тёмный лес. Прошу обратить внимание на необходимость создания некоего триггера для отключения ссылок при старте скроллинга.

К примеру, логика отключения ссылок понятна:

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(e){
        e.preventDefault();
        alert('You just tried to open a link. And jQuery prevented it.');
    });
});
</script>

Однако здесь не хватает того самого триггера.

[Ankhena]

Шигаев.,

Однако здесь не хватает того самого триггера.

А это window.addEventListener('scroll', function() что?
Если всё таки не в момент старта, то можете воспользоваться своими же промежуточными расчетами прозрачности.

[Шигаев.]

Ankhena, ок согласен с тем что ничего не знаю и потому прошу помощи. Могли бы вы мне предоставить полный код в соответствии с моими хотелками? Я действительно боюсь что-то напутать. Что, кстати, и произошло при многочисленных попытках угадывания. Спасибо!

Answer 1

[Павел]

Что-то странное, не совсем понятное, для чего это нужно - ставить блоку прозрачность 0 :)
Тем не менее, попробуйте после строки
element.style.opacity = '0';
Добавить
element.style.pointerEvents = "none";

Comments

[Шигаев.]

Павел, спасибо за ответ. Но дело не в самой прозрачности (посчитаем это за хотелку), а в возможности отключить ссылки в верхнем блоке, при условии начала скроллинга.

То, как отключить ссылки, примерно ясно из данного примера:

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(e){
        e.preventDefault();
        alert('You just tried to open a link. And jQuery prevented it.');
    });
});
</script>

...но отключать ссылки нужно как раз пр событию начала скроллинга остального контента.

[Павел]

При
e.preventDefault();
вам каждый раз нужно будет вешать/снимать обработчик...

Если element.style.pointerEvents не сработал на весь блок, поставьте его на каждую ссылку...

Можно сделать это путем добавления/снятия класса
element.classList.add('nopointer')

.nopointer a {
pointer-events: 'none'
}

if (scrollTop >= scrollThreshold) {
  element.style.opacity = '0';
  element.classList.add("nopointer");
} else if (element.classList.contains("nopointer")) {
  element.classList.remove("nopointer");
}