Форум

russia091 · #1 (**permalink**) 29.10.2015, 15:09

Привет всем.

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

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

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

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

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

ruslan_mart · #2 (**permalink**) 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 · #3 (**permalink**) 30.10.2015, 21:57

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

(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 · #4 (**permalink**) 30.10.2015, 22:49

Видимо да.

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

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

russia091 · #5 (**permalink**) 31.10.2015, 20:15

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

(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 · #6 (**permalink**) 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 · #7 (**permalink**) 31.10.2015, 20:47

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

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

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

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

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

ruslan_mart · #8 (**permalink**) 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 · #9 (**permalink**) 04.11.2015, 02:15

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

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

ruslan_mart · #10 (**permalink**) 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;
	});
});

Форум

Справочник

Discord чат

Курсы javascript