如何使用jQuery更改滚动类？

Question

我正在做一个小项目，在滚动时需要固定菜单，进行研究后发现很多关于它的信息，但我无法使其正常工作！ ：（ 我有这个：

<nav id="change" class="menu">
    <ul>
        <a href="#"><li>INICIO</li></a>
        <a href="#"><li>SERVICIOS</li></a>
        <a href="#"><li>EQUIPO</li></a>
        <a href="#"><li>SKILLS</li></a>
        <a href="#"><li>CONTACT</li></a>
    </ul>
</nav>


<style>
  .menu {
   position: fixed;
   margin-left: 15%;
   margin-top: 15px;
   width: 70%;
   background-image: url('../imagenes/logo2.png');
   background-size: 40px;
   background-position: 3% calc(middle + 5px);
   background-repeat: no-repeat;
   z-index: 100;
  }

.menuF {
   position: fixed;
   margin-top: 0px;
   width: 100%;
   background-color: rgba(0,0,0,0.4);
   background-image: url('../imagenes/logo2.png');
   background-size: 40px;
   background-position: 3% calc(middle + 5px);
   background-repeat: no-repeat;
   z-index: 100;
  }
</style>


<script type="text/javascript">
    $(function() {
        var pixelnum= 50;
        $(window).scroll(function() {    
            var scroll = $(window).scrollTop();

            if (scroll > pixelnum) {
                $('#change').removeClass('menu').addClass('menuF');
            } else {
                $('#change').removeClass("menuF").addClass('menu');
            }
        });
    });
</script>

我所有的脚本都放在同一个HTML文档中的script标签中，有人可以告诉我为什么它不起作用吗？ 以及如何解决呢？

我是jQuery和javascript的新手，但是我对C ++有一些了解，所以希望能对您有所帮助。

对不起，我的英语水平谢谢！

Answer 1

首先将您的Jquery放在<script>标记中。

然后将其添加到CSS

      .menuF{
       postion:fixed;
       top:0;
       z-index: 1000;
       display:block;
      }

Answer 2

我认为问题出在您的CSS中，而不是您的JavaScript中。 将此与您的操作进行比较，看看它是否可以解决您的问题：

 $(function() { var pixelnum= 15; $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > pixelnum) { $('#change').removeClass('menu').addClass('menuF'); } else { $('#change').removeClass("menuF").addClass('menu'); } }); }); 

 .menu { position: absolute; margin-top: 15px; width: 100%; background-color: rgba(0,0,0,0.4); background-image: url('../imagenes/logo2.png'); background-size: 40px; background-position: 3% calc(middle + 5px); background-repeat: no-repeat; z-index: 100; } .menuF { position: fixed; margin-top: 0px; width: 100%; background-color: rgba(0,0,0,0.4); background-image: url('../imagenes/logo2.png'); background-size: 40px; background-position: 3% calc(middle + 5px); background-repeat: no-repeat; z-index: 100; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="change" class="menu"> <ul> <a href="#"><li>INICIO</li></a> <a href="#"><li>SERVICIOS</li></a> <a href="#"><li>EQUIPO</li></a> <a href="#"><li>SKILLS</li></a> <a href="#"><li>CONTACT</li></a> </ul> </nav> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <p>You've reached the bottom.</p>