javascript - Scrolltop horizontal start point -

please see http://codepen.io/anon/pen/zglzor

my "floating div" follows page scroll - after moving scroll bar down. how start floating when px (lets 200px) scroll height has been reached. when scroll down 200px floating div can seen rather straight away.

                $(window).scroll(function(){                    $("#div").stop().animate({"margintop": ($(window).scrolltop()) + "px", "marginleft":($(window).scrollleft()) + "px"}, "slow" );                 }); 

edit:

the div must return original position when scrolling top - past 200px mark

edit: try instead

var lastscrolltop = 0;  $(window).scroll(function(){     var st = $(this).scrolltop();     if (st > lastscrolltop){         if($(window).scrolltop()>200){             $("#div").stop().animate({"margintop": ($(window).scrolltop()) + "px", "marginleft":($(window).scrollleft()) + "px"}, "slow" );         }     } else {         $("#div").stop().animate({"margintop": ($(window).scrolltop()) + "px", "marginleft":($(window).scrollleft()) + "px"}, "slow" );     }     lastscrolltop = st; }); 

this check whether you're going 'up' od 'down' , on down scroll past 200px, on scroll :)