CODEWITHSUNDEEP
androidjqueryiosscrollscrolltop
Maarten Wolfsen
Maarten Wolfsen

Reputation: 1733

Detect scrollTop() when hovered (handheld device)

I am using jQuery's scrollTop() for a fixed menu:

function fixed_menu(){

    if( $('window').width() < 770 )
    {
        var menu = $('.col-left.sidebar');
        var offset = menu.offset();
        var trigger = offset.top;

        $(document).scroll(function(e){
            if($('body').scrollTop() >= trigger){
                menu.addClass('fixed');
            } else if ($('body').scrollTop() < trigger){
                menu.removeClass('fixed');
            }
        });
    }

}
fixed_menu();

When I am testing on my own phone (android device, Moto G 2nd gen), the if statement still works while scrolling.

When I am testing on an iPad mini, the if statement only initiates when the hover is done.

How can I make this function work on certain iOS devices, while the hover is still ongoing?

Upvotes: 2

Views: 60

Answers (1)

P. Frank
P. Frank

Reputation: 5745

The scrollTop() function is problematic in different browser. You can try with $('html, body').scrollTop() and $(window).scroll()

function fixed_menu(){
    if( $('window').width() < 770 ){
        var menu = $('.col-left.sidebar');
        var offset = menu.offset();
        var trigger = offset.top;

        $(window).scroll(function(e){
            if($('html, body').scrollTop() >= trigger){
                menu.addClass('fixed');
            } else if ($('html, body').scrollTop() < trigger){
                menu.removeClass('fixed');
            }
        });
    }
}
fixed_menu();

Upvotes: 3

Related Questions