Frage

I'm having problems with localscroll - I have a fixed header element that appears after 100 or so pixels from the top. When the user clicks on the nav item it scrolls to the correct position but then it when I try to click on another menu item it won't move unless I move the page very slightly.

This only occurs on the iPad - it works fine in desktop browsers.

Does anyone have any ideas?

var sections = $('section,footer'),
links = $('nav a');
$(window).scroll(function() {
    var currentPosition = $(this).scrollTop();
    links.removeClass('selected');

    sections.each(function() {
        var top = $(this).offset().top - 100,
            bottom = top + $(this).height();

        if (currentPosition >= top && currentPosition <= bottom) {
            $('a[href="#' + this.id + '"]').addClass('selected');
        }
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            links.removeClass('selected');
            $('.last a').addClass('selected');
        }
    });
});
$.localScroll();
War es hilfreich?

Lösung

Managed to find the fix via here: https://gist.github.com/mckamey/1e661854044177a95064

(function(){
var THROTTLE = 100,//ms
    _timer = 0,
    _dom = document.documentElement,
    _width = _dom.style.width,
    reset = function(){
        // reset size, unfortunately forces another reflow
        _dom.style.width = _width;
    },
    forceReflow = function(){
        if (_timer) {
            clearTimeout(_timer);
            _timer = 0;
        }

        _width = _dom.style.width;

        // force a reflow by increasing size 1px
        _dom.style.width = (_dom.offsetWidth+1)+'px';

        setTimeout(reset, 0);
    },
    onscroll = function() {
        if (_timer) {
            clearTimeout(_timer);
        }
        _timer = setTimeout(forceReflow, THROTTLE);
    };

window.addEventListener('scroll', onscroll, false);
})();
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top