滾動標題固定jQuery代碼不起作用

Question

從頂部標題修復滾動不起作用。

代碼段：

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() > 350) { 
 
     $('.header-nav').addClass('fixed2'); 
 
    } else { 
 
     $('.header-nav').removeClass('fixed2'); 
 
    } 
 
    }); 
 
});

.fixed2 { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: cornflowerblue; 
 
} 
 

 
html { 
 
    min-height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header-nav"> 
 
    <ul id="main-nav"> 
 
    <li><a href="index.html" class="active">Home</a></li> 
 
    <li><a href="about.html">About</a></li> 
 
    <li><a href="#">Register Your Business</a></li> 
 
    </ul> 
 
</div>

jQuery代碼不衝突，我用$ jQuery的。

jQuery不工作。

Answer 1

此代碼將幫助您。

$(document).ready(function() { 
 
     $(window).scroll(function() { 
 
      if ($(this).scrollTop() > 50) { 
 
       $('.header-nav').addClass('fixed2'); 
 
       $('.header-nav').css('top', Math.round($(this).scrollTop()) + 'px'); 
 
      } else { 
 
       $('.header-nav').removeClass('fixed2'); 
 
      } 
 
     }); 
 
    });

.fixed2 { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
    }

 

 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <div class="header-nav"> 
 
     <ul id="main-nav"> 
 

 
      <li><a href="index.html" class="active">Home</a></li> 
 
      <li><a href="about.html">About</a></li> 
 
      <li><a href="#"> Register Your Busi</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div style="height:1000px;">&nbsp;</div>