Scrolltop horizontal start point

Please see http://codepen.io/anon/pen/zGLZoR

My "floating div" follows the page scroll - it does this immediately after moving the scroll bar down. How do I only start the floating when a px (lets say 200px) scroll height has been reached. So when you scroll down 200px the floating div can be seen rather than straight away.

                $(window).scroll(function(){
                   $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
                });

EDIT:

The div must return to the original position when scrolling back up to the top - past the 200px mark

Answers


EDIT: Try this 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 will check whether you're going 'up' od 'down' and on down it will scroll past 200px, but on up it will scroll normally :)


Need Your Help

Feedback on using ASE on Android?

python android ase

Has anyone made use of ASE (Android scripting enviroment) for anything other than proof of concept apps?

On OSX, how do I gradient fill a path stroke?

cocoa macos core-graphics quartz-graphics

Using the plethora of drawing functions in Cocoa or Quartz it's rather easy to draw paths, and fill them using a gradient. I can't seem to find an acceptable way however, to 'stroke'-draw a path wi...