JQuery/PHP

JQuery implements the effect of rolling to a location to add a class and rolling back to a location to remove a class

PetitQ PetitQ JQuery/PHP 2023-11-22 four hundred and fifty-two zero
Collection
Alibaba Cloud

When the page scrolls to a div, add a new class to the div through js. Then, when the page scrolls back to the div, remove the class added in the previous step.

You can see the middle part of the dynamic graph, and the menu is suspended at the top of the page after scrolling down to a certain position.

On the other hand, when you move the page up to a certain position, the top floating menu will be hidden, and there will be no screenshot.

Want to be here? contact us bar
Maker host

No more nonsense, just code:

  1.  /*Floating menu in the middle of home page*/
  2.  $ ( document ) . ready ( function ( ) {
  3.      var wh = $ ( window ) . height ( ) ;
  4.  hw = $ ( '.index_cont .main_cont .nav' ) . height ( ) ;
  5.  $ ( window ) . scroll ( function ( ) {
  6.      var s = wh - $ ( window ) . scrollTop ( ) ;
  7.      if ( s < hw ) {
  8.  $ ( '.index_cont .main_cont .nav' ) . addClass ( 'fixed' ) ; }
  9.      else {
  10.  $ ( '.index_cont .main_cont .nav' ) . removeClass ( 'fixed' ) ;
  11.      }
  12.      } ) ;
  13.  } ) ;

The css style should be added by yourself. This code is not very neat, and the location seems to be a bit problematic. But it basically realized the function I wanted. So record it for reference.

JQuery implements the effect of rolling to a location to add a class and rolling back to a location to remove a class

113 people have purchased
View Demo Upgrade VIP Buy Now
Collection
fabulous ( zero )

Related articles

Post reply

Hot selling template

Ashade - Works exhibition photo album WordPress Chinese theme
LensNews

This site accepts WordPress/PbootCMS/DedeCMS, etc
System construction, imitation, development, customization and other services!

Sign in