Question

I am having one jquery overlay like this. When pageloads this will display like this.

When user clicks close or feedback button again it goes back to its position like this.

The functionality goes like this. Now When the user scrolls the page it should automatically goes back to its position. Onload i am writing this jquery code to perform this operation, onclick of close button reset() is called. onclick of feedback slideme() is called. So my question is when users scrolls down the page this overlay should go back to position. How to detect user scroll and perform this operation?

$(document).ready(function()
{
    SlideMe();

    $('body').keypress(function(e)
    {
        if(e.keyCode == 27)
        {
            reset();
        }
 });

    });
    function SlideMe()
    {   
        if(document.getElementById('hdnFBStats').value == 1)
        {
            document.getElementById('hdnFBStats').value =0;
            reset();
            return false;
        }

        $lngDocWidth = ($(document).width()/3)+32;

        $('#overlay').fadeIn('fast',function(){
            $("#fb").animate({marginRight:$lngDocWidth}, 1500);         
        });

        $("#feedbackimg").css("margin-right", '100px');
        $("#feedbackimg").css("float", 'right');

        document.getElementById('hdnFBStats').value= 1;
    }

    function reset()
    {
        $("#fb").css('margin-right', '0px');
        $('#overlay').fadeOut('fast');
    }

Answer 1

This will only do the scroll check if the tab is actually open.

$(window).scroll(function() {
    if(document.getElementById('hdnFBStats').value == 1) {
        document.getElementById('hdnFBStats').value = 0;
        reset();
    } else {
        if($(window).scrollTop() == 0) {
            SlideMe();
            document.getElementById('hdnFBStats').value = 1;
        }
    }
});