Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2015, 13:07
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

Изменение цвета элемента в зависимости от 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.: Новичок, второй вопрос на этом волшебном форуме.
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2015, 15:56
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

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

Или я неправильно понял?
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2015, 16:59
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

Верно, скролл только вертикальный.
После генерации все дивы имеют уникальный id.
Как считывать во время скролла offset и как его вписать в условие, которое будет действовать на все дивы, пока не догадался.
В яваскрипте вторую неделю разбираюсь:/
А насчет «триггера» не то написал. Имел в виду способ отследить состояние и применить изменение. Хотел донести, что скрипт должен реагировать именно на «проход элемента через некую виртуальную черту», А НЕ изменять бэкграунд хедера на заранее расписанных «чекпоинтах».
Ответить с цитированием
  #4 (permalink)  
Старый 09.10.2015, 18:03
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Что бы найти эту черту вам нужно обратиться к объекту и взять его offset().top. Если контент будет меняться динамически а не только сразу после загрузки тогда во время изменения контента вам нужно переназначать эту же черту и повторно брать offset().top
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2015, 18:32
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

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

Так вот, нужно сделать так, чтобы при прохождении через каждый из них хедер принимал определенный цвет: по одному цвету на каждый класс (!). Всего же на странице присутствует порядка 30 дивов с уникальным id, каждый из которых принадлежит одному из трех классов. При прохождении дива через «черту» нужно проверить класс и в зависимости от него присвоить style.backgroundColor хедеру.
Таким образом вы бы мне очень помогли, если бы помогли составить скрипт, отслеживающий скролл и реагирующий на достижение дивом этой «черты» (эта часть логики и представляет основную сложность).
Прошу прощения, если кажется, что я повторяю одно и то же, просто задачу пока решить не удалось (даже близко), да и я еще не «приучен» этикету общения на подобного рода форумах.
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2015, 19:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

deniskutovskiy,
а как будет если id="header" 20% на 1 блоке 80% на 2? или 50 на 50
Ответить с цитированием
  #7 (permalink)  
Старый 09.10.2015, 19:32
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

Сообщение от рони Посмотреть сообщение
deniskutovskiy,
а как будет если id="header" 20% на 1 блоке 80% на 2? или 50 на 50
Имеет значение только нижний край хедера (одна точка координаты). Если он касается верхнего края дива (тоже одна точка), происходит перекраска в заданный цвет. До прикосновения к хедеру верхней точки следующего нижнего дива он остается окрашен предыдущим «касанием».
Выходит, что при скролле вверх, при появлении предыдущего (того, что выше) дива в окне (хоть на пиксель) хедер принимает его (появившегося) цвет.
Думаю, так понятнее.
Ответить с цитированием
  #8 (permalink)  
Старый 09.10.2015, 20:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

цвет заголовка от блока под ним
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:17.
Ответить с цитированием
  #9 (permalink)  
Старый 09.10.2015, 20:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

сделать header прозрачным
Ответить с цитированием
  #10 (permalink)  
Старый 10.10.2015, 11:34
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета кнопки для каждого пользователя kade Общие вопросы Javascript 2 23.09.2014 19:46
Изменение класса элемента в зависимости от разрешения экрана funfot Элементы интерфейса 3 20.09.2014 15:20
Изменение цвета элемента donbarton639 Общие вопросы Javascript 4 24.07.2014 12:51
Как отловить изменение computedStyle элемента danik.js Events/DOM/Window 8 25.10.2012 16:40
Изменение цвета ссылки в зависимости от ее адреса theVid jQuery 1 06.10.2012 19:56