2

I tried to implement a div on my website, that sticks to the top of the browser as soon as it scrolls out of the viewport. I found a script that does this pretty good and it works well on the desktop. When I test it on the iphone I have a short lag where the div scrolls out for about a half second and pop then up at the desired location. Has anybody a clue how I could tweak that script?

Here is the link: jsFiddle

Thanks for your help!

function sticky_relocate() {
            var window_top = $(window).scrollTop();
            var div_top = $('#sticky-anchor').offset().top;
            if (window_top > div_top) {
                $('#sticky').addClass('stick');
                $('#sticky-anchor').height($('#sticky').outerHeight());
            } else {
                $('#sticky').removeClass('stick');
                $('#sticky-anchor').height(0);
            }
        }

        $(function() {
            $(window).scroll(sticky_relocate);
            sticky_relocate();
        });
DaniS.
  • 181
  • 2
  • 10

1 Answers1

0

Maybe you can use setTimeout and clear the interval when the scroll is invoked multiple times. This might help by limiting the number of times the callback is invoked.

$(function() {
  var timer;
  $(window).scroll(function() {
    clearInterval(timer);
    timer = setTimeout(function() {
      sticky_relocate();
    }, 50);
  });
  sticky_relocate();
});
Sushanth --
  • 55,259
  • 9
  • 66
  • 105
  • thx for the reply. no change. I tried it with another script (http://leafo.net/sticky-kit/#reference) and there seems to be the same problem. – DaniS. Feb 22 '17 at 07:21
  • duh... found it. sorry. http://stackoverflow.com/questions/32828973/iphone-sticky-menu-jquery-onscroll-ios-9 – DaniS. Feb 22 '17 at 07:31