当页面滚动到一定的位置，页面某div置顶！

当页面滚动到一定的位置，页面某div置顶！

一、html

<div class="top">
	<div class="top_input">
		<input type="text" class="input_height" name="" id="" value="" />
	</div>
	<div class="top_img"><img src="images/[email protected]"/></div>
	<div class="top_list">
		<div class="top_list_son">
			<div class="list_con">今日推荐</div>
			<div class="list_con">一周排行</div>
		</div>
		<div class="list_con_son">
			<div class="list_con_son_text">还没有相关的订单1</div>
			<div class="list_con_son_text">还没有相关的订单2</div>
			<div class="list_con_son_text">还没有相关的订单3</div>
			<div class="list_con_son_text">还没有相关的订单4</div>
			<div class="list_con_son_text">还没有相关的订单5</div>
			<div class="list_con_son_text">还没有相关的订单6</div>
			<div class="list_con_son_text">还没有相关的订单7</div>
			<div class="list_con_son_text">还没有相关的订单8</div>
			<div class="list_con_son_text">还没有相关的订单9</div>
		</div>
	</div>
</div>

二、css

.top{
		width: 7.5rem;
		height: auto;
		margin: 0 auto;
		position: relative;
	}
	.top_input{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto 0;
		height: 1rem;
		width: 100%;
		background: #fff;
		height: 1rem;
		z-index: 988;
	}
	.top_input>input{
		width: 7rem;
		height: 0.7rem;
		line-height: 0.7rem;
		margin: 0 auto;
		display: block;
		border:1px solid #ccc;
		outline: none;
	}
	.top_img{
		width: 7rem;
		height: 3rem;
		margin: 0 auto;
		margin-top: 1.1rem;
	}
	.top_img>img{
		width: 100%;
		height: 100%;
	}
	.top_list{
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}
	.top_list_son{
		width: 7.5rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height:1rem;
		line-height: 1rem;
		background: #ccc;
		margin-top: 0.3rem;
	}
	.list_con_son{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.list_con_son_text{
		font-size: 0.28rem;		
		height: 1rem;		
		line-height: 1rem;
		margin-top: 0.2rem;
	}
	.fixed_add{
		position:fixed;top:0;background:#ccc;z-index: 9999999;
		width:7.5rem;left:0;margin-top: 0;
	}
	.add_height{
		margin-top: 1.3rem;
	}

三、js

$(function(){
	  var distance=$(".top_list_son").offset().top;
	  var top_input=$('.input_height').height();
	  console.log(distance);
	  $(window).scroll(function(){
	    if($(document).scrollTop()>=distance){
    		$('.top_input').hide();
			$('.top_list_son').addClass('fixed_add');
			$('.list_con_son').addClass('add_height');
    }else{
			$('.top_list_son').removeClass('fixed_add');
			$('.top_input').show();
			$('.list_con_son').removeClass('add_height');
	    }
	  });
})