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

为什么我的代码（jQuery）没有响应？目标：粘性标题

1 个答案: