JQuery在滚动时淡入淡出在iOS上无法正常工作答案

【问题标题】：JQuery Fade in and fade out on scroll not working properly on iOSJQuery在滚动时淡入淡出在iOS上无法正常工作
【发布时间】：2017-03-16 21:01:37
【问题描述】：

我有以下代码，当用户滚动时将按钮淡入固定到底部，当用户在移动设备上滚动到顶部时淡出...在桌面上以响应模式测试时工作正常，但在 iOS 上片刻延迟后卡入，但在滚动回顶部时会淡出，我该如何阻止它卡入？

CSS

.cta {
    background-color: rgba(75, 113, 252, 0.9);
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 50px;
    color: #fff;
    height: 50px;
    width: 100%;
    opacity: 1;
    z-index: 999;
 }

$(window).scroll(function() {
if ($(this).scrollTop()> 150) {
$('.cta').fadeIn();
} else {
$('.cta').fadeOut();
}
});

【问题讨论】：

IOS 手机有一种不同的方式来“读取”scrollTop 的值，就像只在您停止滚动时读取，而不是在您实际滚动时读取......她是一种解决方法stackoverflow.com/questions/18753367/…跨度>
也许我做错了什么（对 js 来说是新手），但解决方法并不能阻止淡入淡出，而不是温和淡入淡出。

标签： javascript jquery html ios css

【解决方案1】：

您是否尝试过不同的延迟加载方法？我过去曾成功使用此插件：https://github.com/tuupola/jquery_lazyload

这并不是特别复杂。这是一个简单的例子：

HTML：

<img class="example" data-original="img/myImage.jpg">

JS：

$("img.example").lazyload();

【讨论】：

它并不是真正的延迟加载，它更多的是根据滚动的距离显示和隐藏。