Question

如何在此Javascript脚本中添加多个id或类，以便在滚动值上更改其CSS属性？

<script>
    var fixed = false;

    $(document).scroll(function() {
        if( $(this).scrollTop() >= 434 ) {
            if( !fixed ) {
                fixed = true;
                $('#sub-header').css({position:'fixed',top:82});
            }
        } else {
            if( fixed ) {
                fixed = false;
                $('#sub-header').css({position:'static'});
            }
        }
    });
</script>

编辑：我的解释可能不像我想的那么清楚。我想通过他们的id或类在脚本中包含其他元素。例如，为#header添加一个附加行。我尝试在＃sub-header行下添加$('#header').css({position:'fixed',top:0});，但它不起作用。（我是Javascript的完全新手，所以请原谅我，如果这是基本的。）

这是基本的html代码：

<header id="header></header>
<div id="sub-header">
    <nav id="nav"></nav>
</div>
<div id="content"></div>
<footer id="footer"></div>

Answer 1

$(".class1, .class2, #id1, #id1").css("display", "block");

或

$(".class1").add(".class2").css("property", "value"); // etc

Answer 2

您可以使用jQuery addClass：

$('.your class').addClass('newClass');

Answer 3

我建议您在样式表中创建类，之后您可以使用toggleClass jQuery函数。

<script>
    var fixed = false;

    $(document).scroll(function() {
        if( $(this).scrollTop() >= 434 ) {
            if( !fixed ) {
                fixed = true;
                $('#sub-header').toggleClass("withTop noTop");
                //Or use addClass and removeClass
                $('#sub-header').addClass("withTop");
                $('#sub-header').removeClass("noTop");
            }
        } else {
            if( fixed ) {
                fixed = false;
                $('#sub-header').toggleClass("withTop noTop"); //This

                //Or this
                $('#sub-header').addClass("noTop"); 
                $('#sub-header').removeClass("withTop");
            }
        }
    });
</script>

<style>
.withTop{
    position:static;
}
.noTop{
    postion:fixed;
    top:82;
}
</style>

在Javascript脚本中添加更多id或类

3 个答案: