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

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

29.10.2015 15:09

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

Привет всем.

Столкнулся с проблемкой, нужна помощь знающих людей.

Хочу реализовать плавноисчезающую шапку по мере прокрутки страницы (примерно как в приложении Google Play для андройда), но нагуглить такой скрипт не удается.
Сам я в скриптинге не силен.
Пожалуйста помогите решить эту задачу.

У нас есть шапка div с привязанным к ней классом - "name", нужно сделать так, что бы по мере прокрутки страницы данный блок менял свою opacity ближе к нулю (аналогично по мере возвращения страницы к верху opacity меняется ближе к 1). Хотелось бы что бы данный скрипт работал в мобильных браузерах так же хорошо как и в компьютерных.

Хороший пример подобной шапочки есть тут:
https://sevenmilesmoscow.wordpress.com/

заранее спасибо всем кто поможет:thanks:

ruslan_mart

30.10.2015 13:44

(function() {
	var elem = document.querySelector('.name'),
		body = document.body,
		html = document.documentElement;

	window.addEventListener('scroll', function() {
		var scrollHeight = (html.scrollHeight || body.scrollHeight) - this.innerHeight,
			scrollTop = html.scrollTop || body.scrollTop || 0;
		elem.style.opacity = 1 - 1 / scrollHeight * scrollTop;
	});
})();

russia091

30.10.2015 21:57

Цитата:

Сообщение от Ruslan_xDD (Сообщение 393717)

(function() {
	var elem = document.querySelector('.name'),
		body = document.body,
		html = document.documentElement;

	window.addEventListener('scroll', function() {
		var scrollHeight = (html.scrollHeight || body.scrollHeight) - this.innerHeight,
			scrollTop = html.scrollTop || body.scrollTop || 0;
		elem.style.opacity = 1 - 1 / scrollHeight * scrollTop;
	});
})();

Не срабатывает.
Может я что то не правильно делаю.

Сайт в системе uCoz

ruslan_mart

30.10.2015 22:49

Видимо да.

Вот, для примера: http://jsfiddle.net/jmLaepso/

Скорей всего Вы не туда скрипт ставите, ставьте перед закрывающимся тэгом body, или оберните в onload/DOMContentLoaded.

russia091

31.10.2015 20:15

Цитата:

Сообщение от Ruslan_xDD (Сообщение 393717)

(function() {
	var elem = document.querySelector('.name'),
		body = document.body,
		html = document.documentElement;

	window.addEventListener('scroll', function() {
		var scrollHeight = (html.scrollHeight || body.scrollHeight) - this.innerHeight,
			scrollTop = html.scrollTop || body.scrollTop || 0;
		elem.style.opacity = 1 - 1 / scrollHeight * scrollTop;
	});
})();

Вижу что работает, но у меня почему то не пашет
Я его и перед концом body вставлял и в head тоже.

Что значит обернуть в onload/DOMContentLoaded ???

ruslan_mart

31.10.2015 20:18

Цитата:

Сообщение от russia091

Что значит обернуть в onload/DOMContentLoaded ???

window.addEventListener('DOMContentLoaded', function() {
	var elem = document.querySelector('.name'),
		body = document.body,
		html = document.documentElement;

	this.addEventListener('scroll', function() {
		var scrollHeight = (html.scrollHeight || body.scrollHeight) - this.innerHeight,
			scrollTop = html.scrollTop || body.scrollTop || 0;
		elem.style.opacity = 1 - 1 / scrollHeight * scrollTop;
	});
});

russia091

31.10.2015 20:47

Неее. Сейчас проверил:

Снес все со своей страницы и поставил скрипт заного... Работает.

Посмотрел хтмл и походу понял:

У меня скролл осуществляется не в <body> а в другом <div>

Т.Е. Боди неподвижна, а скроллится в Див с классом "content" по этому и не реагирует. Как то можно дописать скрипт и указать что бы он скролл брал с определенного ДИВа?

ruslan_mart

31.10.2015 20:55

window.addEventListener('DOMContentLoaded', function() {
	var elem = document.querySelector('.name'),
		content = document.querySelector('.content');

	this.addEventListener('scroll', function() {
		elem.style.opacity = 1 - 1 / (content.scrollHeight - content.clientHeight) * content.scrollTop;
	});
});

russia091

04.11.2015 02:15

Один черт не срабатывает.

Почему такое может быть?

ruslan_mart

04.11.2015 04:17

russia091, извиняюсь, это я немного напутал.

window.addEventListener('DOMContentLoaded', function() {
	var elem = document.querySelector('.name'),
		content = document.querySelector('.content');

	content.addEventListener('scroll', function() {
		elem.style.opacity = 1 - 1 / (this.scrollHeight - this.clientHeight) * this.scrollTop;
	});
});

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, ссылку на сайт можно?

russia091

05.11.2015 11:51

Пожалуйста:

http://start-in-game.ru/

Когда Opacity = 0 , то dysplay:none появляется.
Но уменьшение opacity не имеет тормозов.

ruslan_mart

05.11.2015 12:15

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

Вот так точно работать будет. :)

рони	05.11.2015 12:25

Ruslan_xDD,
мысли вслух:
расчитывать что value будет 1 или 0 опасная практика...

russia091

05.11.2015 13:13

Отлично, все работает:victory: Я тебя поздравляю, ты первый кто написал такой скрипт для html сайтов. В гугле до этого я такого не находил.

IE тоже кстати читает этот скрипт.

Спасибо тебе :yes:

ruslan_mart

05.11.2015 13:28

рони, тут всё чётко просчитано. :) Другим значение, по сути, не может быть.

Часовой пояс GMT +3, время: 04:24.