HTML/CSS

JQuery scrolling event $(window). scroll() realizes the height change of navigation bar

 Alibaba Cloud

In some websites, the height of the navigation menu changes with the drop down of the page, and when the page is restored to the top, the height is restored again. The effect is as follows:

How to achieve such a navigation bar height changes with the page dragging? This requires the use of the jQuery scroll event $(window). scroll(). The following describes the implementation method.

Step 1: Place the following code at the bottom of the website navigation code to monitor the vertical distance between the navigation menu and the scroll bar. After reaching the marked height, a class head_up will be automatically added to the navigation menu;

Want to be here? contact us bar
 Maker host
  1.  < script >
  2.  $ ( window ) . scroll ( function  ( )  {
  3.  var sT = $ ( window ) . scrollTop ( ) ;
  4.  if  ( sT > fifty )  {
  5.  $ ( "#header" ) . addClass ( "head_up" ) ;
  6.  }  else  {
  7.  $ ( "#header" ) . removeClass ( "head_up" ) ;
  8.  }
  9.  } ) ;
  10.  </ script >

Step 2: Then add CSS style to the newly added class, and let it control the height of the menu under the new class. Of course, if there are LOGO and pull-down menus in the future, you also need to change the style;

  1.  /*Mouse down, head up*/
  2.  #header .head_up , #header .head_up  .logo a { height :  70px ; transition :  400ms ; }
  3.  #header .head_up  .logo img { max-width :  80% ; head_uptransition :  400ms ; }
  4.  #header .head_up  .nav_box .topnav > li > a { height :  70px ; line-height :  70px ; transition :  400ms ; }
  5.  #header .head_up  .nav_box .topnav > li > .sub-menu { top :  70px ; }

In this way, the drop-down control of navigation height change can be realized. Transition in the code: 400ms has a gradual effect.

JQuery scrolling event $(window). scroll() realizes the height change of navigation bar

294 people have bought
View Demo Upgrade VIP Buy Now

Collection
fabulous ( zero )

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!