javascript - 如何使用 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 文档的脚本标签中，有人能告诉我为什么它不起作用吗？ 以及如何解决这个问题？

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

对不起我的英语水平 谢谢!

Answer 1

我认为问题出在您的 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>