向下滚动鼠标光标时如何修复顶部标题

Question

脚本正在工作，向下滚动时，它确实将顶部标题放在窗口顶部，但不幸的是，有几个小问题让我吃香蕉！

jQuery(document).ready(function() {
var $window = jQuery(window);
$window.scroll(function(){
if ($window.scrollTop() >= 130) {
jQuery('.custom-site-header').addClass('top-header');

} else {
jQuery('.custom-site-header').removeClass('top-header');
}
});
});

.top-header
{
position: fixed;
margin: 0 auto;
width: 100%;
z-index: 1000;
background: #fff;
height:80px;
top:0px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="custom-site-header">Fixed Header</div>
</div>
<section class="body_section">
</section>
</div>

Answer 1

请尝试此代码。希望这对!!!有所帮助

jQuery(document).ready(function() {
			var $window = jQuery(window);
			$window.scroll(function(){
				if ($window.scrollTop() >= 130) {
				jQuery('.custom-site-header').addClass('top-header');
				
			} else {
			   jQuery('.custom-site-header').removeClass('top-header');
			}
			});
			});

.top-header
			{
			position: fixed;
			margin: 0 auto;
			width: 100%;
			z-index: 1000;
			background: #fff;
height:80px;
top:0px;

			}
			.body_section
			{
				height:1000px;
				width:100%;
				background:#ccc;
				
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
				<div class="container">
					<div class="custom-site-header">Fixed Header</div>
				</div>
			<section class="body_section">
			</section>
			</div>