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

时间:2018-05-18 05:43:21

标签: javascript php ajax

脚本正常工作,当向下滚动它确实将顶部标题放在窗口顶部但不幸的是有一些小问题正在驱使我香蕉!

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>

1 个答案:

答案 0 :(得分:0)

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

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>