滚动标题修复了jquery代码无法正常工作

Question

从顶部标题滚动修复无效。

代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

html {
  min-height: 1000px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>