所以我几乎已经摆弄了我的粘性标题,并且它已经开始成型。我所知道的所有重大故障都已经解决了。除此之外。
当你在桌面上查看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>
谢谢!