javascript - 为什么我的代码 (jQuery) 没有响应？目标 : Sticky header

Question

我有一个基本的 HTML，我正在创建一个新类(原始滚动)，它将在我开始滚动时将固定位置添加到我的菜单。

HTML

<header class=" original">
  <h1>This is a Sticky Nav Demo!</h1>
  <p>MAIN MENU</p>
</header>

<div class="main">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, </p>

CSS

.original {
  height: 100px;
  padding-top: 20px;
  background: #f07057;
}

.original-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}

jQuery - 这是我正在使用的函数，但它似乎不起作用!

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 90) {
        $(".original").addClass(".original-scrolled");
    } else {
        $(".original").removeClass(".original-scrolled");
    }
});

我是初学者，如果这段代码很乱，我很抱歉!

Answer 1

您添加和删除类的方式是错误的。这应该有效:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 90) {
        console.log("more than 90");
        $(".original").addClass("original-scrolled");
    } else {
        $(".original").removeClass("original-scrolled");
    }
});

您在添加和删除类名称时指定了类选择器。你应该看看 api here