Как в js сделать ссылку верхнего блока не кликабельной при fixed со скроллингом?
У меня есть рабочий джаваскрипт, реализующий наезд на верхний блок. Он с 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); |
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
Дополнительно:
JS
.preventDefault()
CSS
visibility
pointer-events
К примеру, логика отключения ссылок понятна:
<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> |
<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>
Однако здесь не хватает того самого триггера.
Однако здесь не хватает того самого триггера.
А это window.addEventListener('scroll', function() что?
Если всё таки не в момент старта, то можете воспользоваться своими же промежуточными расчетами прозрачности.
Ответы:
Что-то странное, не совсем понятное, для чего это нужно - ставить блоку прозрачность 0 :)
Тем не менее, попробуйте после строки
element.style.opacity = '0';
Добавить
element.style.pointerEvents = "none";
- Павел, спасибо за ответ. Но дело не в самой прозрачности (посчитаем это за хотелку), а в возможности отключить ссылки в верхнем блоке, при условии начала скроллинга.
То, как отключить ссылки, примерно ясно из данного примера:
<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>
<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' }
.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"); }
if (scrollTop >= scrollThreshold) { element.style.opacity = '0'; element.classList.add("nopointer"); } else if (element.classList.contains("nopointer")) { element.classList.remove("nopointer"); }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать ссылку верхнего блока не кликабельной при fixed со скроллингом в JavaScript, можно использовать следующий подход:
1. Начнем с HTML структуры, в которой у нас есть верхний блок с фиксированным позиционированием и ссылкой внутри него:
```html
```
2. Далее, в JavaScript мы можем добавить обработчик события scroll, который будет проверять, находится ли верхний блок в зоне видимости и добавлять или удалять класс у ссылки в зависимости от этого:
```html
window.addEventListener('scroll', function() {
var topBlock = document.getElementById('topBlock');
var link = topBlock.querySelector('a');
var topBlockRect = topBlock.getBoundingClientRect();
if (topBlockRect.top <= 0) {
link.classList.add('unclickable');
} else {
link.classList.remove('unclickable');
}
});
```
3. Наконец, добавим стили для класса unclickable, который будет делать ссылку не кликабельной:
```html
.unclickable {
pointer-events: none;
color: gray;
text-decoration: none;
}
```
Теперь при прокрутке страницы, когда верхний блок становится зафиксированным, ссылка в нем будет не кликабельной, а при возвращении в обычное положение - снова станет кликабельной.