How to detect scroll from inner page and apply if statement logic if page is not scrolled?

How to detect scroll from inner page and apply if statement logic if page is not scrolled?

Hello,

I am a bit struggling on this one.

I have build an app with Jquery and would like to detect the scrolling on the mobile so I can hide or show my navbar.

My first problem is this code example from the jquery website:

  1. $( "#target" ).scroll(function() {
  2.   $( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
  3. });
The problem in this example, it does not show how to apply an "if" statement if the page is scrolled or NOT scrolled.

ie:
  1. If(pageIsScrolled){
  2. app.navbar.hide('.navbar');
  3. }else{
  4. app.navbar.show('.navbar');
  5. }

The second problem is the page itself. I am not loading single pages but instead loading my pages inside another element like this:



  1.         <div class="page">
  2.             <div class="page-content">
  3.                 <div class="row">
  4.                     <div class="col-10"></div>
  5.                     <div class="col-80 align-content-center">
  6.                         <div class="top-space"></div>
  7.                         <img src="img/logo.png" width="100%" class="animated fadeIn" />
  8.                         <div class="bottom-space"></div>
  9.                     </div>
  10.                     <div class="col-10"></div>
  11.                 </div>
  12.                 <div id="load-pages"></div> <------Here
  13.             </div>
  14.         </div>

And i am not sure how can jquery detect the scrolling of an inner page,


Any idea how to fix both issues please?

I am using Cordova and Jquery.


Thanks,