I'm using jScrollPane and trying to find out how to get the scrolling amount. Basically I want to know when user reaches the bottom of the scroll so I can fire another function. This is my function:
in_page_scroll : function() {
"use strict";
var inpage_container = $('.pal_inpage_wrapper'),
inpage_top_padd = $('.header_wrapper').height(),
win_main_height = $(window).height() - inpage_top_padd;
inpage_container.css({
height: win_main_height,
marginTop: inpage_top_padd,
paddingTop: 0}).jScrollPane({
autoReinitialise: true,
enableKeyboardNavigation : true
}).bind('mousewheel', function(e) {
e.preventDefault();
});
}
Thanks in advance.
--* EDIT *-----------------------------------------------------------------------------------
I just found-out the answer. Here it is:
$(function() {
var element = $('.scroll-pane').jScrollPane(),
api = element.data('jsp');
$('.scroll-pane').bind('scroll', function() {
if($('.scroll-pane').outerHeight() + api.getContentPositionY() >= api.getContentHeight()) {
//Fire another function here
}
});
});
Just for giving a recomendation and a stylish finish, I use this:
JS
$('#jScrollPane').bind(
'jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom)
{
if(scrollPositionY > 0) {
$(this).addClass('ShadowTOP')
}
if(isAtTop) {
$(this).removeClass('ShadowTOP')
}
}
).jScrollPane()
I've added a transition effect. The effect will be similar to GMail.
STYLE
.TransitionShadow{
transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
}
.ShadowTOP{
-webkit-box-shadow: inset 0px 12px 16px -10px rgba(100, 100, 100, 0.3);
box-shadow: inset 0px 10px 16px -10px rgba(100, 100, 100, 0.3);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With