Jquery Hide Show ScrollTop

Question

i am looking for a way to show the children of my div when i scroll down .

Here my code :

$(document).ready(function (e) {

    var test = 0;
    $('#one').children('div').hide().css({
        'overflow': 'hidden'
    });

    $('#one').hover(function () {
        $(this).children('div').stop(true, true).show('slow');
    }, function () {
        $(this).children('div').stop(true, true).hide('slow');
    });

When i scroll down like two time ( ~ 30 pix) , i want to show the div children so when the user reach again the top of his screen he can see the div children but this:

if ($(window).scrollTop() >11) {
        test+=1;
    }

if(test!==0){
    $('#one').children('div').show().css({
       'overflow': 'visible'
    });

seems not to work. I want this trick to work without modify the mousehoverfunction.

here the jsfiddle for better understanding.

Answer 1

DEMO

Try this

 $(document).ready(function (e) {
    var test = 0;
    $('#one').children('div').hide().css({
        'overflow': 'hidden'
    });
    $('#one').hover(function () {

        $(this).children('div').stop(true, true).show('slow');
    }, function () {
        $(this).children('div').stop(true, true).hide('slow');
    });

});
$(window).scroll(function(event) {

    if ($(window).scrollTop() >11) {
     $('#one').children('div').stop(true,true).show();
    }

});

Hope this helps,Thank you