javascript - addclass 和选择器的问题

Question

我对 jQuery 还很陌生，所以我确信这是一个明显的错误 - 但尽管如此，它还是让我感到难过。我正在尝试制作一个非常简单的导航栏，在您滚动经过它后，它会从页面下方 500px 移动到顶部的绝对定位。

问题:当我使用导航栏的 div ID 和#navbar 选择器时，我似乎无法让 js 找到导航栏。

这是js:

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var scrollDepth = 500;
        if ($(window).scrollTop() > scrollDepth) {
            $('#navbar').addClass('fixed')
        } else {
            $('#navbar').removeClass('fixed')
        }
    })
})

这是问题的 jsfiddle:http://jsfiddle.net/ayGwn/475/

Answer 1

这是一个特殊性的问题。 id 的 CSS 规则将覆盖类的 CSS 规则。如果您将 .fixed { ... } 更改为 #navbar.fixed { .. } 它应该可以工作。假设您没有将 .fixed 用于其他用途。

MDN article about CSS selectors specificty

The following list of selectors is by increasing specificity:

• Universal selectors
• Type selectors
• Class selectors
• Attributes selectors
• Pseudo-classes
• ID selectors
• Inline style