!!!! Изменение цвета при скролле

[Alim]

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

[bes]

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

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

[Alim]

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

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

[bes]

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

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

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

[Alim]

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

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

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

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

дней)

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

[Alim]

[Alim]

Тема закрыта

я просто наплевал на 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]

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

Тема закрыта

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

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

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

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

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

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

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

[Alim]

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

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

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

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

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

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