Fix a div after scrolling in mobile browsers

Question

I want to fix a div during scrolling of the page. My code works in desktop browsers but it is not working in mobile devices where the div is fixed only when the scroll bar stops. You can test the page here www.spiaggiati.it/antani/.

The code is:

function fixDiv() {
var $div = $("#order");
if ($(window).scrollTop() > $div.data("top")) {
    $div.css({'position': 'fixed', 'top': '-10px', 'width': $('div#content').width()});
    $('#categories').css('margin-top', '50px');
}
else {
    $div.css({'position': 'static', 'top': 'auto'});
    $('#categories').css('margin-top', '0px');
}
}

This might be something you are looking for http://stackoverflow.com/questions/8644248/jquery-fix-div-when-browser-scrolls-to-it — Akki619, Aug 14 '13 at 13:19
Samuele, è una pagina di prova. C'è anche la pizza bianca a 23,30 € se ti interessa :p — qwerty, Aug 14 '13 at 13:31

score 0 · Answer 1 · answered Aug 14 '13 at 13:18

0

I assume fixDiv() is fired constantly using the scroll-event.

If so then there's no solution at the moment as this is how scrolling on mobile devices works. The scroll event is triggered only when the scrolling has come to an end. As long as the momentum is moving the content no events are fired at all. You can see this in Figure 6-1 The panning gesture in Apple's "Safari Web Content Guide".

answered Aug 14 '13 at 13:18

insertusernamehere

23,204
9
87
126

yes, this is the trigger: $(window).scroll(fixDiv). So there is no solution at the moment? :( – qwerty Aug 14 '13 at 13:23
@user737024 I'm afraid there isn't. :-/ – insertusernamehere Aug 14 '13 at 13:58

Fix a div after scrolling in mobile browsers

1 Answers1