Vignesh Gopalakrishnan
Vignesh Gopalakrishnan

Reputation: 1982

Detecting scroll in jquery and change the operations

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

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

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');
    }

Upvotes: 2

Views: 1514

Answers (2)

Calvin
Calvin

Reputation: 1295

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;
        }
    }
});

Upvotes: 3

regulatethis
regulatethis

Reputation: 2352

You can use jQuery's $(window).scroll() event

http://api.jquery.com/scroll/

Upvotes: 4

Related Questions