Hoot check if page scroll event is up or down?

1

I want to us the page scroll event to hide or show a top menu and it works, it logs to the console.

$$(document).on(‘scroll’, ‘.page-content’, function(){

console.log(“the page is scrolling”)

});

But how can I check if I scroll up or down?
Since when I scroll the page up I want to hide the menu and when I scroll the page up I want to show the menu.

Thanks

2

Read this topic.
Maybe it helps

1 Like
3

Thanks. I now can hide the top-toolbar-produkter div with this when //downscroll code is running, but it is not showing it when I scroll up!

var lastScrollTop=0;
var pos=0;
$$(document).on(‘scroll’, ‘.page-content’, function(){

pos=$$(document).find(’.page-current > .page-content-produkter’).scrollTop();

if (pos > lastScrollTop){
// downscroll code
console.log(“scrolling down”)
$$(document).find(’.top-toolbar-produkter’).animate({“top”:"-"+44+“px”}, { duration:400, easing: ‘linear’});

} else if(pos < lastScrollTop) {
// upscroll code
console.log(“scrolling up”)
$$(document).find(’.top-toolbar-produkter’).animate({“top”:+44+“px”}, { duration:400, easing: ‘linear’});

}
lastScrollTop = pos;
});

So the check if scrolling up or down is working, and this is hiding the top-toolbar-produkter div when I scroll down but not showing it when scrolling up? What can be the problem?

Or how would be a better way to do it?

Any input appreciated!

4

Ok so I solved it! So if you want to hide a top menu on scroll down and show it on scroll up, this is how I did it!

var lastScrollTop=0;
var pos=0;
$$(document).on('scroll', '.page-content', function(){
pos=$$(document).find('.page-current > .page-content-produkter').scrollTop();
	
   if (pos > lastScrollTop){
      // downscroll code
	  //console.log("scrolling down")
	  $$(document).find('.top-toolbar-produkter').css({"transform":"translate3d(0,-44px,0)"});
	  $$(document).find('.top-toolbar-produkter').css({"transition":"transform 300ms ease"});
   } else {
      // upscroll code
	  $$(document).find('.top-toolbar-produkter').css({"transform":"translate3d(0,0,0)"});
   }
   lastScrollTop = pos <= 0 ? 0 : pos;

},true);
5

Isn’t the hide-toolbar-on-scroll does the same? :slight_smile:

https://framework7.io/docs/toolbar-tabbar.html#control-toolbar-tabbar-with-page-classes

6

Haha, you might think so, but the .top-toolbar-produkter div is not the ordinary .toolbar div, this is another one below that :wink: