Всем привет! Люди, возникла у меня проблема.

я так полагаю, что проблема в css.

Суть: есть сайт одностраничник(длинная страница). и гдето в середине странице(при скроленге должна появляться анимация, из ящика выскакивают картинки). Но когда я скролю и дохожу до нужного место анимации нет, скрипт js работает правильно ибо проверочный alert выскакивает. НО если обновить страницу в этом месте, и сделать скрол маленький то анимация просходит.

Еще делал так чтобы картинки были видными, и когда долистываю до нужно места картинки не видны, но при обновлении они видны.

Надеюсь понятно объяснил, помогите пожалуйста.

Я так понимаю, что я ни правильно понимаю принцип работы сиго дива: background-image: url(img/images/box_39.png);

вот куски кода:

        <img src="img/win3.jpg"></li>
      <li>
        <p>Так мы следим за результатом работы нашей  компании<span></span></p>
        <img src="img/win4.jpg"></li>
    </div>
  </div>
  <a href="#form" class="green_but">оставить заявку</a> </div>
<div class="gradient delta va">
  <div class="center">
    <h2><i> освободитесь от кучи<br>
      скучной и рутинной работы </i>
      <div class="line"></div>
      пользуйтесь worklay</h2>
  </div>
</div>
<div class="animate_box center">
  <div class="icobox">
    <div class="ico ico1"></div>
    <div class="ico ico2"></div>
    <div class="ico ico3"></div>
    <div class="ico ico4"></div>
    <div class="ico ico5"></div>
    <div class="ico ico6"></div>
    <div class="ico ico7"></div>
    <div class="ico ico8"></div>
    <div class="ico ico9"></div>
    <div class="ico ico10"></div>
    <div class="ico ico11"></div>
    <div class="ico ico12"></div>
    <div class="ico ico13"></div>
    <div class="ico ico14"></div>
    <div class="ico ico15"></div>
    <div class="ico ico16"></div>
    <div class="ico ico17"></div>
    <div class="ico ico18"></div>
    <div class="ico ico19"></div>
    <div class="ico ico20"></div>
    <div class="ico ico21"></div>
    <div class="ico ico22"></div>
    <div class="ico ico23"></div>
    <div class="ico ico24"></div>
    <div class="ico ico25"></div>
    <div class="ico ico26"></div>
    <div class="ico ico27"></div>
    <div class="ico ico28"></div>
    <div class="ico ico30"></div>
    <div class="ico ico31"></div>
    <div class="ico ico32"></div>
    <div class="ico ico33"></div>
    <div class="ico ico34"></div>
    <div class="ico ico35"></div>
    <div class="ico ico36"></div>
    <div class="ico ico37"></div>
    <div class="ico ico38"></div>
    <div class="ico ico39"></div>
    <div class="ico ico40"></div>
    <div class="ico ico41"></div>
    <div class="ico ico42"></div>
    <div class="ico ico43"></div>
    <div class="ico ico44"></div>
    <div class="ico ico45"></div>
    <div class="ico ico46"></div>
    <div class="ico ico47"></div>
    <div class="ico ico48"></div>
    <div class="ico ico49"></div>
    <div class="ico ico50"></div>
    <div class="ico ico51"></div>
    <div class="ico ico52"></div>
    <div class="ico ico53"></div>
    <div class="ico ico54"></div>
  </div>
  <div class="box"></div>
  <div class="box2"></div>
</div>

.ico1 {
	background-image: url(../img/images/box_02.png);
	top: 30%;
	left: 80%;
}
.ico2 {
	background-image: url(../img/images/box_03.png);
	top: 30%;
	left: 68%;
}
.ico3 {
	background-image: url(../img/images/box_04.png);
	top: 20%;
	left: 51%;
}
.ico4 {
	background-image: url(../img/images/box_05.png);
	top: 30%;
	left: 55%;
}
.ico5 {
	background-image: url(../img/images/box_06.png);
	top: 50%;
	left: 20%;
}
.ico6 {
	background-image: url(../img/images/box_07.png);
	top: 30%;
	left: 31%;
}
.ico7 {
	background-image: url(../img/images/box_08.png);
	top: 30%;
	left: 44%;
}
.ico8 {
	background-image: url(../img/images/box_09.png);
	top: 24%;
	left: 39%;
}
.ico9 {
	background-image: url(../img/images/box_10.png);
	top: 57%;
	left: 15%;
}
.ico10 {
	background-image: url(../img/images/box_11.png);
	top: 18%;
	left: 33%;
}
.ico11 {
	background-image: url(../img/images/box_12.png);
	top: 15%;
	left: 42%;
}
.ico12 {
	background-image: url(../img/images/box_13.png);
	top: 23%;
	left: 25%;
}
.ico13 {
	background-image: url(../img/images/box_14.png);
	top: 32%;
	left: 22%;
}
.ico14 {
	background-image: url(../img/images/box_15.png);
	top: 10%;
	left: 38%;
}
.ico15 {
	background-image: url(../img/images/box_16.png);
	top: 40%;
	left: 80%;
}
.ico16 {
	background-image: url(../img/images/box_17.png);
	top: 22%;
	left: 62%;
}
.ico17 {
	background-image: url(../img/images/box_18.png);
	top: 50%;
	left: 83%;
}
.ico18 {
	background-image: url(../img/images/box_19.png);
	top: 50%;
	left: 10%;
}
.ico19 {
	background-image: url(../img/images/box_20.png);
	top: 48%;
	left: 60%;
}
.ico20 {
	background-image: url(../img/images/box_21.png);
	top: 47%;
	left: 37%;
}
.ico21 {
	background-image: url(../img/images/box_22.png);
	top: 40%;
	left: 20%;
}
.ico22 {
	background-image: url(../img/images/box_23.png);
	top: 37%;
	left: 14%;
}
.ico23 {
	background-image: url(../img/images/box_24.png);
	top: 10%;
	left: 48%;
}
.ico24 {
	background-image: url(../img/images/box_25.png);
	top: 14%;
	left: 58%;
}
.ico25 {
	background-image: url(../img/images/box_26.png);
	top: 27%;
	left: 17%;
}
.ico26 {
	background-image: url(../img/images/box_27.png);
	top: 32%;
	left: 62%;
}

и т.д.

jQuery(function( $ ) {
    $(document).ready(function() {
        $(document).scroll(function() {
            var $top = $(document).scrollTop();
            var $poz = $('.animate_box').offset().top;
            var $cla = $('.icobox').attr('class');
                if($top >= $poz-200) {
                	animateon();
                }
                else if($top <= $poz-300) {
                    animateoff();
                }
        });
        $('.monitor_galery').bxSlider({
            mode: 'fade',
            auto:true
            });
        $('.mask, #close').click(function() {
            $('.zvonock, .vopross , .mass').fadeOut();
        });
        $('.win').click(function() {
            $('.zvonock').toggle();
        });
        $('.right').click(function() {
            $('.vopross, .mask, #close').fadeIn();
        });
        $('#close').click(function() {
            $('.zvonock').hide();
        });
        $('#close-1').click(function() {
            $('.vopross').hide();

        });
        $(".zvonock .mask").click(function(){
            console.log(123123);
        })
    });
    function animateon(){
                $('.ico').fadeIn(700).dequeue()
                $('.icobox:hidden').animate({width:'100%'},700,'easeInSine').dequeue();
                $('.icobox:hidden').animate({height:'100%'},700,'easeOutSine').dequeue();
    }
    function animateoff(){
                $('.icobox').animate({width:'0%',height:'0%'},500).dequeue();
                $('.ico').fadeOut().dequeue()
    }
});

_____________
http://flibro.com/