How to achieve such an effect? The waypoints plug-in of jQuery is widely used. In fact, a simple piece of jQuery code can achieve this effect without jQuery plug-in. However, the browser effect below IE9 may be worse if it is combined with CSS3 transition. The key code to achieve the above effect is as follows.
Firstly, jQuery is used to judge the scrolling of a web page. When the scrolling height of the web page is greater than 120 pixels, the “small” class is added to the nav; otherwise, the class is removed. This is similar to the previous article on this site that added the function of returning to the top to WordPress, and it is judged based on scrollTop.
$(document).on(“scroll”, function() {
if ($(document).scrollTop() > 120) {
$(“nav”).addClass(“small”);
} else {
$(“nav”).removeClass(“small”);
}
});
Then, CSS is needed to cooperate. First, the top navigation position needs to be set to static, and then when the navigation changes, the CSS3 transition effect is added.
nav {
height:141px;
background:#fff;
border-bottom:1px solid #ccc;
width:100%;
position:fixed;
top:0;
left:0;
z-index:10;
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s
}
nav.small {
height: 51px;
}
When the height of the drop-down page exceeds 120 pixels, the navigation will automatically shrink like the above effect, which is very simple and the effect is very good.