Изменение цвета элемента в зависимости от id элемента на координате
Есть фиксированный белый хедер высотой 100px:
<div id="header">Я — хедер</div> // position: fixed; height: 100px; background: white; и 2 блока, каждый из которых занимает в высоту, скажем, 600px: <div id="block1">Я — блок 1</div> // background: red; width: 100%; height: 600px; <div id="block2">Я — блок 2</div> // background: green; width: 100%; height: 600px; Задача: Написать скрипт, который при касании дивом хедера (В примере выше получается, что при скролле дива на 100px от верхнего края экрана) будет заставлять хедер принимать цвет дива (или любой заданный). Насколько я догадываюсь, проще всего, если это возможно, сделать это считыванием id элемента на координате (например x10y101) и сменой цвета хедера на указанный, в зависимости от полученного id, цвет. В моем случае дивы генерируются циклом, так что скрипт нужен универсальный, построенный на тригерах именно айдишных, а не считающий пиксели. P.S.: Новичок, второй вопрос на этом волшебном форуме. |
Какие триггеры, о чем Вы?
Скролл я так понял у вас только вертикальный, по этому уже берем только scroll top, после генерации дивов во время скролла считываются все данные по id, такие как - offset().top, background-color. Или я неправильно понял? |
Верно, скролл только вертикальный.
После генерации все дивы имеют уникальный id. Как считывать во время скролла offset и как его вписать в условие, которое будет действовать на все дивы, пока не догадался. В яваскрипте вторую неделю разбираюсь:/ А насчет «триггера» не то написал. Имел в виду способ отследить состояние и применить изменение. Хотел донести, что скрипт должен реагировать именно на «проход элемента через некую виртуальную черту», А НЕ изменять бэкграунд хедера на заранее расписанных «чекпоинтах». |
Что бы найти эту черту вам нужно обратиться к объекту и взять его offset().top. Если контент будет меняться динамически а не только сразу после загрузки тогда во время изменения контента вам нужно переназначать эту же черту и повторно брать offset().top
|
Примерно понял, но мои попытки написать код пока не венчаются успехом. Возможно моя задача звучит несколько сложнее.
Скажем есть 3 дива: <div id="block1" class="1"></div> <div id="block2" class="2"></div> <div id="block3" class="3"></div> Так вот, нужно сделать так, чтобы при прохождении через каждый из них хедер принимал определенный цвет: по одному цвету на каждый класс (!). Всего же на странице присутствует порядка 30 дивов с уникальным id, каждый из которых принадлежит одному из трех классов. При прохождении дива через «черту» нужно проверить класс и в зависимости от него присвоить style.backgroundColor хедеру. Таким образом вы бы мне очень помогли, если бы помогли составить скрипт, отслеживающий скролл и реагирующий на достижение дивом этой «черты» (эта часть логики и представляет основную сложность). Прошу прощения, если кажется, что я повторяю одно и то же, просто задачу пока решить не удалось (даже близко), да и я еще не «приучен» этикету общения на подобного рода форумах. |
deniskutovskiy,
а как будет если id="header" 20% на 1 блоке 80% на 2? или 50 на 50 |
Цитата:
Выходит, что при скролле вверх, при появлении предыдущего (того, что выше) дива в окне (хоть на пиксель) хедер принимает его (появившегося) цвет. Думаю, так понятнее. |
цвет заголовка от блока под ним
deniskutovskiy,
вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0}
#header{position:fixed;height:100px;background:#FFF}
#block1{background:#F00;width:100%;height:600px}
#block2{background:#008000;width:100%;height:600px}
body{
height: 1500px;
}
.block{
text-align: center;
color: #FF00FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $(".block");
$(window).scroll(function() {
s.each(function(indx, elem){
var pos = elem.getBoundingClientRect(),
color = $(elem).css("backgroundColor");
if(pos.top > -500 && pos.top < 100) $("#header").css({"backgroundColor" : color})
});
});
});
</script>
</head>
<body>
<div id="header">Я — хедер</div>
<div id="block1" class="block">Я — блок 1</div>
<div id="block2" class="block">Я — блок 2</div>
</body>
</html>
|
:) сделать header прозрачным
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:47. |