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')
        }
    })
})

这是问题的一个方面：http://jsfiddle.net/ayGwn/475/

Answer 1

这是一个具体问题。 id的CSS规则将覆盖类的CSS规则。如果您将.fixed { ... }更改为#navbar.fixed { .. }，它应该有效。假设您没有使用.fixed进行其他任何操作。

MDN article about CSS selectors specificty

以下选择者列表是通过提高特异性来实现的：


通用选择器

类型选择器

班级选择器

属性选择器

伪类

ID选择器

内联样式

Answer 2

您应该使用#navbar.fixed，而不是.fixed。因为id样式比class样式更优先。在你的情况下，javascript工作正常。正在添加.fixed类。但是，当您为position:absolute #navbar定义id时，它会覆盖.fixed类的样式规则。

addclass和selectors的问题

2 个答案: