Question

滚动后我需要我的标题来改变它的颜色。我知道在Stackoverflow上有很多类似问题的问题，但是我已经尝试了所有的解决方案而且都没有工作。有人能帮帮我吗？

HTML

<div class="header">HEADER</div>

CSS

.header {
    background-color: red;
    color: black;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
}
.header .change {
    background-color: black;
    color: red;
}

Jquery的

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

    if(scroll >= 500) {
        $(".header").addClass(".change");
    } else {
        $(".header").removeClass(".change");
    }
});

JSfiddle

Answer 1

试试这种方式，

在主体min-height的css中设置最小高度以激活窗口滚动。
从.移除addClass()，例如addClass('header')或removeClass('header');

删除额外的.header班级表格.change css班级

// CSS

body{
 min-height:800px;
 }
.header{
    background-color: red;
    color: black;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
}

.change{  //see here 
    background-color: black;
    color: red;
}

// JS

$(window).scroll(function() {    
var scroll = $(window).scrollTop();
 //console.log(scroll);
if (scroll >= 50) {
    //console.log('a');
    $(".header").addClass("change");
} else {
    //console.log('a');
    $(".header").removeClass("change");
}

}）;

查看演示： https://jsfiddle.net/19bwe33x/12/

修改

$(window).scroll(function() { var scroll = $(window).scrollTop(); var objectSelect = $("#change_header"); var objectPosition = objectSelect.offset().top; if (scroll > objectPosition) { $(".header").addClass("change"); } else { $(".header").removeClass("change"); } });

更新的FIDDLE： https://jsfiddle.net/19bwe33x/17/

Answer 2

你快到了：

<强> SCRIPT：

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

    if (scroll > 500) {
        $(".header").addClass("change"); // you don't need to add a "." in before your class name
    } else {
        $(".header").removeClass("change");
    }
});

<强> CSS：

.change{ // you don't need .header .change
    background-color: black;
    color: red;
}

小提琴：https://jsfiddle.net/19bwe33x/6/

Answer 3

首先。首先，您需要提供min-height，以便用户可以滚动。

第二：然后将$(".header").addClass(".change");更改为$(".header").addClass("change");

第三次并从.header

中删除.header .change

应用以下CSS：

body{
    min-height:1000px;
}
.header{
    background-color: red;
    color: black;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
}

 .change{
    background-color: black;
    color: red;
}

https://jsfiddle.net/19bwe33x/3/

Answer 4

改变这个：

.header .change {

到此：

.header.change {

请注意，我删除了空格。如果要在SAME元素上指示多个样式，则不应该有空格。该空格表示您要定位子元素上的样式。

Answer 5

试试这个

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
$(".header").html(scroll);
    if (scroll >= 500) {
        $(".header").addClass("change");
    } else {
        $(".header").removeClass("change");
    }
});

Css将是

.change{
    background-color: black;
    color: red;
}

Answer 6

检查lin jsfiddle k

jquery是

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

    if (scroll >= 100) {
        $(".header").addClass("change");   // removed the . from class
    } else {
        $(".header").removeClass("change");  // removed the . from class
    }
});

CSS

.header{
    background-color: red;
    color: black;
    width: 100%;
    height: 80px;
 position:fixed;
    top: 0;
    left: 0;

}

.header.change{
    background-color: black;
    color: red;
}
.conetnt
{
 height :800px;     // this is just for scroll
}

HTML

<div class="header">HEADER</div>
<div class="conetnt">    // added this just to enable scrol

</div>

如何在滚动某处后更改课程

6 个答案: