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

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

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

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

В общем вся проблема в том что скрипт некорректно работает во время скролла

т.е во время скролла цвета блоков не меняются

а вся идея в том чтобы цвета плавно менялись во время скроллинга

http://learn.javascript.ru/play/EGRaKb

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="admin" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <title>Untitled - 1</title>
    <style>
   .active{
        
    }
dbody {
	min-height: 750px;
}
    .body div{
        display: block;
        text-align: center;
        border: 10px solid #000;
        height: 250px;
        width: 70%;
        padding-top: 200px;
    }
    .menu{
        position: fixed;
        right: 20px;
        top: 20px;
        border: 2px solid #000;
    }
    </style>
</head>
<body>
<ul class="menu">
	<li><a href="#1">11111</a></li>
	<li><a href="#2">22222</a></li>
	<li><a href="#3">33333</a></li>
	<li><a href="#4">44444</a></li>
	<li><a href="#5">55555</a></li>
	<li><a href="#6">66666</a></li>
</ul>
<div class="body">
<a name="1" ></a><br /><div id="f1">1</div>
<a name="2" ></a><br /><div id="f2">2</div>
<a name="3" ></a><br /><div id="f3">3</div>
<a name="4" ></a><br /><div id="f4">4</div>
<a name="5" ></a><br /><div id="f5">5</div>
<a name="6" ></a><br /><div id="f6">6</div>
</div>
<script>

$(document).ready(function(){
    var link = window.location.hash.replace("#","");
    $('.body a[name="'+link+'"]').next().next().addClass('active');
    $('.menu a').click(function(){
    var _name = $(this).attr("href");            
    document.location.href = _name;
    location.reload();      
});});
$(function() {
$(window).scroll(function(){
    

var distanceTop1 = $('#f1').offset().top - 450;
var distanceTop2 = $('#f2').offset().top - 450;
var distanceTop3 = $('#f3').offset().top - 450;
var distanceTop4 = $('#f4').offset().top - 450;
var distanceTop5 = $('#f5').offset().top - 450;
var distanceTop6 = $('#f6').offset().top - 450;

if  ($(window).scrollTop() > distanceTop1){
$('#f2,#f3,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f1').animate({ backgroundColor: "green"}, 500);}
else
$('#f1').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop2){
$('#f1,#f3,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f2').animate({ backgroundColor: "green"}, 500);}
else
$('#f2').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop3){
$('#f2,#f1,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f3').animate({ backgroundColor: "green"}, 500);}
else
$('#f3').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop4){
$('#f2,#f3,#f1,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f4').animate({ backgroundColor: "green"}, 500);}
else
$('#f4').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop5){
$('#f2,#f3,#f4,#f1,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f5').animate({ backgroundColor: "green"}, 500);}
else
$('#f5').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop6) {
$('#f2,#f3,#f4,#f5,#f1').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f6').animate({ backgroundColor: "green"}, 500);
}
else
$('#f6').stop(true).animate({ backgroundColor: "none" }, 500);
});
});

</script>
</body>
</html>

ПОМОГИТЕ!!! :help:

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

Чет там кода слишком много. Удали дубли, а то вломы разбираться..

danik.js,
В принципе весь код слизан отсюда http://dnzl.ru/view_post.php?id=188

Только вот это сам кое-как нацарапал (ну почти сам) и с этим кодом вроде бы проблем нет

$(document).ready(function () {
        var link = window.location.hash.replace("#", "");
        $('.body a[name="' + link + '"]').next().next().addClass('active');
        $('.menu a').click(function () {
          var _name = $(this).attr("href");
          document.location.href = _name;
          location.reload();
        });
      });

Без дублей

$(function () {

        $(window).scroll(function () {


          var distanceTop1 = $('#f1').offset().top - 450;

          if ($(window).scrollTop() > distanceTop1) {
         
            $('#f1').animate({
              backgroundColor: "green"
            }, 500);
          } else $('#f1').stop(true).animate({
            backgroundColor: "none"
          }, 500);
        });
      });

а в логи ошибки валятся?

или может условие не выполняется..
выведите в консоль результаты при скроле:

...
var distanceTop1 = $('#f1').offset().top - 450;
 console.log(distanceTop1);
console.log(($(window).scrollTop() > distanceTop1) ? 'условие выполнилось' : 'условие не выполнилось');
if ($(window).scrollTop() > distanceTop1) {
...

В принципе всё работает только надо было чтобы цвета блоков менялись при скроллинге а не только после его остановки

(в логах ошибок нет)

Может есть какая-то библиотека jq?

<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>
dbody {
	min-height: 750px;
}
div {
	text-align: center;
	border: solid 1px lightgreen;
	width: 80%;
	height: 200px;
	margin: 2em;
}
</style>
<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>
<script>
jQuery(function ($) {
	$(window).scroll(function(){
		$(".f").each(function() {
			if ($(this).offset().top < $(window).scrollTop() + 50) {
				$(this).animate({backgroundColor: "green"}, 200);
			} else {
				$(this).animate({backgroundColor: "none"}, 200);
			}
		});
	});
});
</script>

ну и подумай как это использовать, чтобы не было each

http://www.xiper.net/examples/js-plu...lor/color.html
вот пример. но вот почему то jquery.color.js с jquery-1.10.1.min.js дружить не хочет..

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

(всё это дело для интернет магазина, для страницы представления товаров)

Вот уже целый день бьюсь головой об стену:(

ссори за то что не объяснил суть проблемы

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

Цитата:

Сообщение от Alim

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

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

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

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

Цитата:

Сообщение от Alim

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

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

Цитата:

Сообщение от bes

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

Цитата:

Сообщение от bes (Сообщение 260269)

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

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

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

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

дней)

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

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

Тема закрыта

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

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

Цитата:

Сообщение от Alim

Тема закрыта

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

Цитата:

Сообщение от Alim

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

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

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

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

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

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

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

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

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

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

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

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