页面滚动一定距离后导航条固定

场景

如淘宝页面，滚动条滚动一定距离后页眉会有一个固定的搜索框、右侧也会将导航条固定，并且产生一个新的板块。如下图所示：

这种样式是需要在script中做点样式，代码如下：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    //我也不知道是啥，但是不加不行
<script>        
     
  // 右侧导航滚动固定
  $(function() {
  		$(window).scroll(function() {
  			if($(document).scrollTop() >= 240) {                   //定义滚动多少后产生改变
  				$(".box1").addClass("box1-flex").slideDown();      //滚动一定距离后导航条样式改变，固定
				$(".back-to-top").show();                          //滚动一定距离后，回顶区域显现
  			} else {
				$(".box1").removeClass("box1-flex").slideDown();   //回滚后导航条样式变回去
				$(".back-to-top").hide();                          //回滚后回顶区域隐藏
  			}
  		})
  	})
	
	// 搜索框滚动固定
	$(function() {
			$(window).scroll(function() {
				if($(document).scrollTop() >= 55) {                              //定义滚动多久后产生改变
					$(".search").addClass("search-flex").slideDown();            //滚动一定距离后整个搜索区域样式改变
					$(".site-nav").addClass("site-nav-fixed").slideDown();       //滚动一定距离后搜索框样式改变
					$(".nav-pic").addClass("nav-pic-fixed").slideDown();         //滚动一定距离后图片样式改变
					$(".qrcode").hide();                                         //产生固定导航栏后二维码隐藏
					$(".site-nav-fb").show();                                    //产生固定导航栏后生成一个新的不固定的搜索框用于占位，防止页面布局打乱
					$(".search-info").hide();                                    //产生固定导航栏后搜索框下文字隐藏
				} else {
					$(".search").removeClass("search-flex").slideDown();         //回滚后整个搜索区域的整体样式改变
					$(".site-nav").removeClass("site-nav-fixed").slideDown();    //回滚后固定的导航栏样式改变，变成不固定的
					$(".nav-pic").removeClass("nav-pic-fixed").slideDown();      //回滚后图标logo样式变回去
					$(".site-nav-fb").hide();                                    //回滚后不固定的搜索框隐藏
					$(".search-info").show();                                    //回滚后搜索框下方文字显示
					$(".qrcode").show();                                         //回滚后搜索框二维码显示
				}
			})
		})
  </script>