Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Изменение цвета элемента в зависимости от id элемента на координате (https://javascript.ru/forum/events/58745-izmenenie-cveta-ehlementa-v-zavisimosti-ot-id-ehlementa-na-koordinate.html)

deniskutovskiy 08.10.2015 13:07

Изменение цвета элемента в зависимости от 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.: Новичок, второй вопрос на этом волшебном форуме.

hfts_rider 09.10.2015 15:56

Какие триггеры, о чем Вы?
Скролл я так понял у вас только вертикальный, по этому уже берем только scroll top, после генерации дивов во время скролла считываются все данные по id, такие как - offset().top, background-color.

Или я неправильно понял?

deniskutovskiy 09.10.2015 16:59

Верно, скролл только вертикальный.
После генерации все дивы имеют уникальный id.
Как считывать во время скролла offset и как его вписать в условие, которое будет действовать на все дивы, пока не догадался.
В яваскрипте вторую неделю разбираюсь:/
А насчет «триггера» не то написал. Имел в виду способ отследить состояние и применить изменение. Хотел донести, что скрипт должен реагировать именно на «проход элемента через некую виртуальную черту», А НЕ изменять бэкграунд хедера на заранее расписанных «чекпоинтах».

hfts_rider 09.10.2015 18:03

Что бы найти эту черту вам нужно обратиться к объекту и взять его offset().top. Если контент будет меняться динамически а не только сразу после загрузки тогда во время изменения контента вам нужно переназначать эту же черту и повторно брать offset().top

deniskutovskiy 09.10.2015 18:32

Примерно понял, но мои попытки написать код пока не венчаются успехом. Возможно моя задача звучит несколько сложнее.
Скажем есть 3 дива:
<div id="block1" class="1"></div>
<div id="block2" class="2"></div>
<div id="block3" class="3"></div>

Так вот, нужно сделать так, чтобы при прохождении через каждый из них хедер принимал определенный цвет: по одному цвету на каждый класс (!). Всего же на странице присутствует порядка 30 дивов с уникальным id, каждый из которых принадлежит одному из трех классов. При прохождении дива через «черту» нужно проверить класс и в зависимости от него присвоить style.backgroundColor хедеру.
Таким образом вы бы мне очень помогли, если бы помогли составить скрипт, отслеживающий скролл и реагирующий на достижение дивом этой «черты» (эта часть логики и представляет основную сложность).
Прошу прощения, если кажется, что я повторяю одно и то же, просто задачу пока решить не удалось (даже близко), да и я еще не «приучен» этикету общения на подобного рода форумах.

рони 09.10.2015 19:05

deniskutovskiy,
а как будет если id="header" 20% на 1 блоке 80% на 2? или 50 на 50

deniskutovskiy 09.10.2015 19:32

Цитата:

Сообщение от рони (Сообщение 391419)
deniskutovskiy,
а как будет если id="header" 20% на 1 блоке 80% на 2? или 50 на 50

Имеет значение только нижний край хедера (одна точка координаты). Если он касается верхнего края дива (тоже одна точка), происходит перекраска в заданный цвет. До прикосновения к хедеру верхней точки следующего нижнего дива он остается окрашен предыдущим «касанием».
Выходит, что при скролле вверх, при появлении предыдущего (того, что выше) дива в окне (хоть на пиксель) хедер принимает его (появившегося) цвет.
Думаю, так понятнее.

рони 09.10.2015 20:12

цвет заголовка от блока под ним
 
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>

рони 09.10.2015 20:19

:) сделать header прозрачным

deniskutovskiy 10.10.2015 11:34

Цитата:

Сообщение от рони (Сообщение 391429)
:) сделать header прозрачным

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


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