I'd like to hide/show NiceScroll
based on the result of an if
function.
In my html
there are three sections which are scrolled from left to right one by one.
My script is as follows:
var section2 = $('#section2').offset().left;
$(window).scroll(function(){
var scrollZpos = $(document).scrollLeft();
if (scrollZpos <= section2 ) {
$("body").getNiceScroll().hide();
}
if (scrollZpos == section2 ) {
$("body").niceScroll({touchbehavior:false,cursorcolor:"#67a5df",horizrailenabled:false,cursoropacitymax:1,autohidemode:false,cursorwidth:10,cursorborder:0,cursorborderradius:0,cursorminheight:180});
}
else if(scrollZpos >= section2 ){
$("body").getNiceScroll().hide();
}
});
It hides when scrolling outside of section 2, but when scrolling back it doesn't reappear.
I found a solution to this answer on Github.
It's better to create NiceScroll
during the document
ready
event.
$("body").getNiceScroll().show()