Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   !!!! Изменение цвета при скролле (https://javascript.ru/forum/dom-window/39575-izmenenie-cveta-pri-skrolle.html)

Alim 04.07.2013 21:29

Ваш скрипт переделать не могу:blink:

bes 04.07.2013 21:56

Цитата:

Сообщение от Alim
надобно чтобы когда блок в центре экрана он окрашивался а у других цвет изчезал

вторая и третья задачи решаются легко, первая - надо определить, что будет подразумеваться под нахождением блока в центре экрана

Alim 04.07.2013 22:01

Думаю 50-40% от верха окна браузера

Никак не пойму как всё это реализовать

bes 04.07.2013 22:06

Цитата:

Сообщение от Alim
Думаю 50-40% от верха окна браузера

вообще ни о чём не говорит, давай точнее
Цитата:

Сообщение от bes
надо определить, что будет подразумеваться под нахождением блока в центре экрана


Alim 04.07.2013 22:54

Цитата:

Сообщение от bes (Сообщение 260269)
вообще ни о чём не говорит, давай точнее

Вся суть проблемы такова: Я делаю кусок интернет магазина. Там на одной странице около 10 товаров которые должны подсвечиваться когда они в центре окна браузера (отступ 200-300px сверху)

хотелось бы всё это дело реализовать

сам пока не могу т.к знания не позволяют(я в JavaScript 0. А в jquery 5

дней)

просьба помочь

Alim 05.07.2013 11:50

:help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help:

Alim 05.07.2013 18:35

Тема закрыта

я просто наплевал на animate и всё пошло как надо

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style>

div .f{
	text-align: center;
	border: solid 1px lightgreen;
	width: 80%;
	height: 300px;
	margin: 2em;
}
.stick_r{
    background-color: #000000;
}
.f_cont{
    margin: 400px auto;
    width: 80%;
}
</style>
<div class="f_cont">
<div class="f">1</div>
<div class="f">2</div>
<div class="f">3</div>
<div class="f">4</div>
<div class="f">5</div>
<div class="f">6</div>
</div>
<script>
$(function () {
    $(window).scroll(function(){
        $(".f").each(function () {
           var window_top = $(window).scrollTop();
           var div_top = $(this).offset().top;
            if (window_top > div_top - 400){
                $(".f").removeClass('stick_r');
                $(this).addClass('stick_r');}
            else{
                $(this).removeClass('stick_r');};
        });
    });
});
</script>

bes 05.07.2013 20:16

Alim, кнопка запуска [html run]

Цитата:

Сообщение от Alim
Тема закрыта

здесь умные люди, поэтому темы не закрывают ;)

Цитата:

Сообщение от Alim
сам пока не могу т.к знания не позволяют(я в JavaScript 0. А в jquery 5

js здесь пока вообще ни при делах

возьми лист бумаги, нарисуй на нём блоки разной высоты, выстриги из другого листа экран и наложи его на первый лист, теперь двигай экран
далее в деталях опиши когда каждый из блоков должен быть зелёным, когда нет

первое условие ты, если так можно сказать, сформулировал: блок зелёный, когда он находится ниже определённого расстояния (например, 200px) от верхней границы клиентской части окна браузера

теперь сформулируй, когда он должен перестать быть зелёным при движение его вверх и при движении вниз от положения, когда верхняя граница находится ровно на этом расстоянии (учти, что блоки бывают разной высоты, как и сама клиентская часть окна браузера, поэтому, например, блок у тебя может быть больше этой клиентской части)

когда с этим разберёшься, можно будет начать думать над реализацией

Alim 05.07.2013 21:43

Короче я уже всё организовал

На странице блоки высотой 500px
они становятся зеленоватыми когда они на расстоянии около 300px от верха окна браузера если окно браузера мало то крайне неудобно смотреть товары так что вероятность этого крайне мала

animate некорректно работает когда я хватаю полосу прокрутки (по крайней мере в google chrome)

Все организованно так что человек переходит на страницу с якоря который на 310px выше предоставленного товара
при прокрутке добавляются и удаляются классы

и в конце концов заказчику все понравилось всё работает во всех браузерах даже в ишаке <8

так что всем огромное спасибо особенно bes-у так как за основу всего взят его скрипт:)


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