坚持移动之前粘滞的标题延迟

时间:2015-08-18 19:42:27

标签: jquery html css mobile sticky

所以我几乎已经摆弄了我的粘性标题,并且它已经开始成型。我所知道的所有重大故障都已经解决了。除此之外。

当你在桌面上查看my website(目前只有一个页面)时,除了一个奇怪的弹跳之外,标题效果很好。当我使用触摸时,我会在某些时候进行调查。

但是,在移动设备上观看时,在滚动时标题棒/未标记之前会有明显的延迟。我不知道为什么会这样,并且因为我的JavaScript经验接近而发现调试很困难不存在的。有人知道出了什么问题吗?

这是我的粘性代码:

<script>

// Wrap the logic to a function for call.
var stickFunction = function() {
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
                                  sticky.classList.remove('fixed');

  window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
                                  jQuery('.content').css("paddingTop", "0px");
}

document.addEventListener('scroll', onScroll);
}

// Get the image element
var splashImage = document.querySelector('.splash img');

// Check if image is complete or not.
if (splashImage.complete) { // If completed, do the logic.
stickFunction();
} else { // If not, tell the image to call the function for you when it is loaded.
splashImage.onload = stickFunction;
}

</script>

谢谢!

0 个答案:

没有答案