0

I have the following code that fades a button in fixed to the bottom as the user scrolls and fades out when the user scrolls to the top on mobile... works fine when tested in responsive mode on desktop, however on iOS it snaps on after a moments delay but fades out when scrolling back to the top as it should, how can I stop it from snapping on?

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;
 }

js

$(window).scroll(function() {
if ($(this).scrollTop()> 150) {
$('.cta').fadeIn();
} else {
$('.cta').fadeOut();
}
});
Digital Robot Gorilla
  • 397
  • 1
  • 5
  • 13
  • IOS mobile has a different way to "read" the value of the scrollTop it is like only reads when you stop scrolling not when you are actually scroll ... her is a workaround http://stackoverflow.com/questions/18753367/jquery-live-scroll-event-on-mobile-work-around – DaniP Mar 16 '17 at 21:08
  • Maybe I'm doing something wrong (new to js) but the work around doesn't stop the fade in part from snapping on instead of a gentle fade on. – Digital Robot Gorilla Mar 16 '17 at 21:21

1 Answers1

0

Have you tried different methods of lazy loading? I've had success with this plug-in in the past: https://github.com/tuupola/jquery_lazyload

It's not particularly complicated. Here's a quick example:

HTML:

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

JS:

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

R. McManaman
  • 304
  • 2
  • 14