0

I have made a function wich runs on the computer very well. But on mobiles the position refreshes only when the scrolling stops. Its a known problem and i found answers but I didnt get it in my function working. Maybe one of you can help me.

my function:

$(window).scroll(function () {
    if ($(window).scrollTop() >600) {
        $('#logo').css('position', "fixed");
        $('#logo').css('top', 0);
    }
    else if($(window).scrollTop() < 600) {
        $('#logo').css('position', "relative");
        $('#logo').css('top', 600)
    }
});

and in the internet i found this which i should replace in my function:

$('body').on({
    'touchmove': function(e) { 
        console.log($(this).scrollTop()); // Replace this with your code.
    }
});

or this:

$('body').bind('touchmove', function(e) { 
    console.log($(this).scrollTop()); // Replace this with your code.
});

It would be nice if someone could rewrite my function so that it works smoothly in mobiles.

Edit

I explain shortly what this function do. When you load my page there is a blackscreen with a headline. Nothing else. when you scroll up the title should move up normaly until he reaches the top. when it reaches the top it gets the "position: fixed" attribute. when you scroll down it gets the "position: relative" attribute again. Nothing else should happen. But on mobiles the text scrolls up until the scrolling stops (most of the time you scroll the text out of the screen) and pop up on the fixed position. But when it fixed everything is ok and it stands there.

kruben
  • 142
  • 2
  • 14

1 Answers1

1

The problem might be in the fixed position rather than in the scrollTop. Fixed positioned elements are not very mobile friendly. Its behavior depends on the mobile device and OS.

More info: http://bradfrostweb.com/blog/mobile/fixed-position/

Alvaro
  • 40,778
  • 30
  • 164
  • 336