Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Исчезающая шапка при прокрутке страницы (https://javascript.ru/forum/dom-window/59141-ischezayushhaya-shapka-pri-prokrutke-stranicy.html)

russia091 04.11.2015 05:07
:D Блин, а я уже сайт переделал.

Ладно, тогда такую проблемку вижу:
Шапка зафиксирована, но меняет прозрачность, и при этом она ни куда не девается, то есть в сквоь нее ссылки же не нажать?

Как можно решить?

Предлагаю вариант такой:

Если opacity = 0, то z-index = 0 :write: пропиши пожалуйста :thanks:

ruslan_mart 04.11.2015 05:38 
window.addEventListener('DOMContentLoaded', function() {
	var elem = document.querySelector('.name'),
		content = document.querySelector('.content'),
		isVisible = true;

	content.addEventListener('scroll', function() {
		var value = 1 - 1 / (this.scrollHeight - this.clientHeight) * this.scrollTop;
		elem.style.opacity = value;
		if(isVisible != !!value) {
			elem.style.display = isVisible ? 'none' : '';
			isVisible = !isVisible;
		}
	});
});

russia091 04.11.2015 10:05 
(function() {
 var elem = document.querySelector('.opacTop'),
 body = document.body,
 html = document.documentElement;
 isVisible = true;
 
 window.addEventListener('scroll', function() {
 var scrollHeight = (html.scrollHeight || body.scrollHeight) - this.innerHeight,
 scrollTop = html.scrollTop || body.scrollTop || 0;
 elem.style.opacity = 1 - 7 / scrollHeight * scrollTop;
 elem.style.opacity = value;
 if(isVisible != !!value) {
 elem.style.display = isVisible ? 'none' : '';
 isVisible = !isVisible;
 }
 });
})();




Я верно прописал?

Потому что не срабатывает.

ruslan_mart 04.11.2015 12:18
russia091, так Вам прокрутка блока или всей страницы нужна?

Если прокрутка блока, то выше рабочий вариант. А если страницы, то:

window.addEventListener('DOMContentLoaded', function() {
	var elem = document.querySelector('.opacTop'),
		body = document.body,
		html = document.documentElement;
		isVisible = true;
 
	window.addEventListener('scroll', function() {
		var scrollHeight = (html.scrollHeight || body.scrollHeight) - this.innerHeight,
			scrollTop = html.scrollTop || body.scrollTop || 0,
			value = 1 - 1 / scrollHeight * scrollTop;
		elem.style.opacity = value;
		if(isVisible != !!value) {
			elem.style.display = isVisible ? 'none' : '';
			isVisible = !isVisible;
		}
	});
});

russia091 04.11.2015 16:45
А нет, взял второй вариант кода (под страницу который), к сожалению он не видит сылки под шапкой, когда шапка исчезла:-?

ruslan_mart 05.11.2015 08:00
Всё работает.

http://jsfiddle.net/otv9ps22/

russia091 05.11.2015 10:50
Хм странно у меня этот же скрипт стоит, а все равно ссылки не нажимаются.

У меня кстати еще пара вопросов:

- Я заметил, что чем длиннее страница, тем медленнее исчезает шапочка. То есть за основу он берет длину всей страницы, а возможно взять за основу определенное расстояние скажем в пикселях, что бы шапка всегда исчезала одинаково?

- В конце концов, чем обязан тебе за помощь? :thanks: Я не особо богат, но и не нищий))

ruslan_mart 05.11.2015 10:53 
window.addEventListener('DOMContentLoaded', function() {
	var elem = document.querySelector('.opacTop'),
		body = document.body,
		html = document.documentElement;
		isVisible = true;
 
	window.addEventListener('scroll', function() {
		var maxHeight = 200, //Вот оно
			scrollHeight = (html.scrollHeight || body.scrollHeight) - this.innerHeight,
			scrollTop = html.scrollTop || body.scrollTop || 0,
			value = 1 - 1 / Math.min(scrollHeight, maxHeight) * scrollTop;
		elem.style.opacity = value;
		if(isVisible != !!value) {
			elem.style.display = isVisible ? 'none' : '';
			isVisible = !isVisible;
		}
	});
});


Цитата:
Сообщение от russia091
- В конце концов, чем обязан тебе за помощь? Я не особо богат, но и не нищий))
Да не нужно ничего, спасибо. :)

russia091 05.11.2015 11:28
Посмотри:

Я увидел почему ссылки не нажимаются.

Сначала глянул твой пример через Ctrl+Shift+i и заметил, что у тебя opacity снижается до 0, после чего добавляется стиль dysplay: none.

Потом посмотрел тоже самое на своем сайте и вот что увидел:

opacity уходит в минус, при том чем ниже, тем больше минус. А раз нет нуля, то и display:none не появляется :D .

Почему так происходит интересно?

ruslan_mart 05.11.2015 11:40
russia091, ссылку на сайт можно?


Часовой пояс GMT +3, время: 11:35.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице