0

The following script successfully adds or removes a "fix" class to an element (#sideBarWrapper) in desktop browsers, depending on the distance a user has scrolled.

(function (exocet, $, undefined) {
    // Distance of sidebar from document top
    function sideBarTop () {
        return $eventSideBar.offset().top;
    }
    // Distance user has scrolled
    function scrollDist () {
        return $(window).scrollTop();
    }
    // Toggle sidebar class
    function sideBarStick(sbt) {
        if (sbt-30 < scrollDist()) {
            $sideBarWrapper.addClass('fix');
        } else{
            $sideBarWrapper.removeClass('fix');
        }
    }
    // Scroll events
    function scroll() {
        $eventSideBar = $('#eventSideBar');
        $sideBarWrapper = $('#sideBarWrapper');
        var sbt = sideBarTop();
        return $(window).scroll(function () {
            sideBarStick(sbt);
        });
    }
    exocet.init = function () {
        scroll();
    };
}(window.exocet = window.exocet || {}, jQuery));

Invoked like so:

$(function() {
    exocet.init();
});

The problem is, in Safari for iPad, the class doesn't seem to get added until the document has come to a halt, often long after the sidebar has scrolled out of view. How can I compensate for this?

verism
  • 1,106
  • 1
  • 12
  • 35
  • 1
    Have a look at : http://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad and http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ you'll probably want to bind to the `ontouchstart` event, as it's a touch device. – Nick R Jun 04 '14 at 14:24
  • @NickR: Thanks - I'll have to check those resources later, but they both look very helpful. – verism Jun 04 '14 at 14:27

0 Answers0