Jquery implements div that exceeds the specified height and sets the element to top and scroll

We will see that the advertisements of many websites do not scroll at the specified position, but will automatically scroll at the top or bottom of the browser when the position is exceeded. Next I will introduce an example for you.

The second-level navigation is a certain distance from the top. When the page scrolls beyond the second-level navigation, the second-level navigation is fixed on the top.

As we all know, position: fixed is used for absolute positioning. It can be achieved by adjusting its z-index value.

However, JS is required to trigger events only when the scroll bar is down.

The CSS code is as follows:

The Code is as follows:	Copy code
. Category { Border: # d45d3f 3px solid; Height: 56px; Width: 1142px; Line-height: 56px; Margin: 0 14px; Background-color: # eee; Z-index: 999; } . Nav-fixed { Position: fixed; Top: 0; Opacity: 0.9; }

The JS Code is as follows:

The Code is as follows:	Copy code
$ (Window). scroll (function (){ Var pos = $ (window). scrollTop (); If (pos> 378 ){ $ ('. Category'). addClass ('nav-fixed '); } Else { $ ('. Category'). removeClass ('nav-fixed '); } });