jQuery Based on Scroll Amount Not Working

Trying to add a class to a div when the user scrolls past 500px. However this is not working in ionic, as i believe the scroll value is always same in angular. Is there any way to apply jquery, scroll based effects, in Ionic?

$(function() {
var div = $(".clear");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        div.removeClass('clear').addClass("fixtop");
    } else {
        div.removeClass("fixtop").addClass('clear');
    }
});

});

Hi @salkhoin,

If you want to add class to any div when user scrolls past 500px from the top then you can achieve using infinite scroll directive in ionic (https://ionicframework.com/docs/api/directive/ionInfiniteScroll/).

Kind of similar example is mentioned below:

(http://codepen.io/elm/pen/Becqp)

I know its not the similar way of solution what you were expecting but I am sure that this will help you in getting your solution in ionic way.

Feel free to mark this as a solution and you can always like the answer by clicking on heart icon.