Tabs will be change based on page height

Question

I have used Four tabs in fixed in top of the page. When page scrolls tabs will be changed, it is based on mouse move and page height. Now I want to change the tab when page go to top not based on mouse move.

My Html :

<li><a href="#tab1" id="dev" class="tab_active">Tab1</a>
 <li><a href="#tab2" id="mai">tab2</a>
 <li><a href="#tab3" id="con">Tab3</a>
 <li><a href="#tab4" id="ent">Tab4</a>

My Javascript:

 $(document).on( "mousemove", function(event){
             var x = event.pageY;



            if ((x>0) && (x<=1499))
          {
            $("#mai").removeClass("tab_active");
            $("#con").removeClass("tab_active");
            $("#ent").removeClass("tab_active")
            $("#dev").addClass("tab_active");
            $("#tab1").removeClass("hei");
          }
          if ((x>1500) && (x<=2199))
          {
            $("#dev").removeClass("tab_active");
            $("#con").removeClass("tab_active");
            $("#ent").removeClass("tab_active")
            $("#mai").addClass("tab_active");
            $("#tab1").removeClass("hei");
            $("#he").removeClass("hei");

          }

          if ((x>2200) && (x<=2700))
          {
            $("#con").addClass("tab_active");
            $("#dev").removeClass("tab_active");
            $("#mai").removeClass("tab_active");
            $("#ent").removeClass("tab_active");
            $("#tab1").removeClass("hei");
          }

          if ((x>2800) && (x<=4000))
          {
            $("#ent").addClass("tab_active");
            $("#dev").removeClass("tab_active");
            $("#mai").removeClass("tab_active");
            $("#con").removeClass("tab_active");
            $("#tab1").removeClass("hei");
          }


    });

Answer 1

its possible to test once you provide the complete code of the page than just javascript because we cannot make page for you and add and call your function .

be smart to get immediate answers

 $(document).on( "mousemove", function(event){
             var x = event.pageY;



            if ((x>0) && (x<=1499))
          {
            $("#mai").removeClass("tab_active");
            $("#con").removeClass("tab_active");
            $("#ent").removeClass("tab_active")
            $("#dev").addClass("tab_active");
            $("#tab1").removeClass("hei");
          }
          if ((x>1500) && (x<=2199))
          {
            $("#dev").removeClass("tab_active");
            $("#con").removeClass("tab_active");
            $("#ent").removeClass("tab_active")
            $("#mai").addClass("tab_active");
            $("#tab1").removeClass("hei");
            $("#he").removeClass("hei");

          }

          if ((x>2200) && (x<=2700))
          {
            $("#con").addClass("tab_active");
            $("#dev").removeClass("tab_active");
            $("#mai").removeClass("tab_active");
            $("#ent").removeClass("tab_active");
            $("#tab1").removeClass("hei");
          }

          if ((x>2800) && (x<=4000))
          {
            $("#ent").addClass("tab_active");
            $("#dev").removeClass("tab_active");
            $("#mai").removeClass("tab_active");
            $("#con").removeClass("tab_active");
            $("#tab1").removeClass("hei");
          }


    });