如何在滚动某处后更改类

问题描述：

我需要我的页眉在滚动后更改其颜色。我知道在*上有类似的问题，但我尝试了所有的解决方案，但都没有成功。有人能帮助我吗？如何在滚动某处后更改类

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

答

尝试这种方式，

设置在CSS中最小高度为身体min-height激活窗口滚动。
从您的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"); 
}

}）;

查阅DEMO 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/

非常感谢。我能再问你一个问题吗？当我需要我改变它的颜色后，滚动到达像这里更新的JSfiddle一些对象https://jsfiddle.net/19bwe33x/14/。我尝试将滚动位置“50”更改为“#objects_id”，但它不起作用 –

尝试'if（scroll> $（'＃change_header'）。offset（）。top）{} https://jsfiddle.net/ 19bwe33x/15/ – Raoulito

@PetrRajchert，对不起，迟到了，我和朋友一起在周末派对的路上，看到我更新的答案。可能会帮助你的要求。祝你好运。 –

答

更改此：

.header .change {

这样：

.header.change {

注意，我删除了空间。当你想在SAME元素上指定多个样式时，不应该有空格。该空间表示您在子元素上定位样式。

答

首先。首先你需要给min-height这样，用户可以滚动。

二：然后换$(".header").addClass(".change");到$(".header").addClass("change");

三而从.header .change

删除.header应用下面的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/

答

试试这个

$(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; 
}

答

就快：

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/

答

检查林jsfiddleķ这里

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>

如何在滚动某处后更改类

相关推荐