Исчезающая шапка при прокрутке страницы

[russia091]

Блин, а я уже сайт переделал.

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

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

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

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

[ruslan_mart]

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]

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

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]

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

[ruslan_mart]

Всё работает.

http://jsfiddle.net/otv9ps22/

[russia091]

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

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

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

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

[ruslan_mart]

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]

Посмотри:

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

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

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

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

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

[ruslan_mart]

russia091, ссылку на сайт можно?