Исчезающая шапка при прокрутке страницы
Привет всем.
Столкнулся с проблемкой, нужна помощь знающих людей. Хочу реализовать плавноисчезающую шапку по мере прокрутки страницы (примерно как в приложении Google Play для андройда), но нагуглить такой скрипт не удается. Сам я в скриптинге не силен. Пожалуйста помогите решить эту задачу. У нас есть шапка div с привязанным к ней классом - "name", нужно сделать так, что бы по мере прокрутки страницы данный блок менял свою opacity ближе к нулю (аналогично по мере возвращения страницы к верху opacity меняется ближе к 1). Хотелось бы что бы данный скрипт работал в мобильных браузерах так же хорошо как и в компьютерных. Хороший пример подобной шапочки есть тут: https://sevenmilesmoscow.wordpress.com/ заранее спасибо всем кто поможет:thanks: |
(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 |
Видимо да.
Вот, для примера: http://jsfiddle.net/jmLaepso/ Скорей всего Вы не туда скрипт ставите, ставьте перед закрывающимся тэгом body, или оберните в onload/DOMContentLoaded. |
Цитата:
Я его и перед концом body вставлял и в head тоже. Что значит обернуть в 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;
});
});
|
Неее. Сейчас проверил:
Снес все со своей страницы и поставил скрипт заного... Работает. Посмотрел хтмл и походу понял: У меня скролл осуществляется не в <body> а в другом <div> Т.Е. Боди неподвижна, а скроллится в Див с классом "content" по этому и не реагирует. Как то можно дописать скрипт и указать что бы он скролл брал с определенного ДИВа? |
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, извиняюсь, это я немного напутал.
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;
});
});
|
| Часовой пояс GMT +3, время: 20:39. |