jQuery 滚动到某处后如何更改课程

how to change class after scroll somewhere

提问by Petr Rajchert

I need my header to change its color after scroll. I know there are a lot of questions with a similar problem on Stackoverflow, but I have tried all the solutions and none work. Can someone help me please?

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

HTML

HTML

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

CSS

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

JSfiddle

回答by Always Sunny

Try this way,

试试这个方法

• set minimum height in css for body min-heightto activate window scrolling.
• remove .from your addClass(), like thisaddClass('header')or removeClass('header');

• remove extra .headerclass form .changecss class

  //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");
  }
  

  });

• 在 css 中为 body 设置最小高度min-height以激活窗口滚动。
• 删除.从您的addClass()，像这样addClass('header')或removeClass('header');

• 删除额外的.header类表单.changecss 类

  //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");
  }
  

  });

SEE DEMO:https://jsfiddle.net/19bwe33x/12/

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

EDIT:

编辑：

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

UPDATED FIDDLE:https://jsfiddle.net/19bwe33x/17/

更新的小提琴：https ://jsfiddle.net/19bwe33x/17/

回答by Raoulito

You're almost there:

您快到了：

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:

CSS：

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

fiddle: https://jsfiddle.net/19bwe33x/6/

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

回答by ketan

First.First of all you need to give min-heightso, user can scroll.

第一的。首先，您需要这样做min-height，用户可以滚动。

Second:Then change $(".header").addClass(".change");to $(".header").addClass("change");

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

ThirdAnd remove .headerfrom .header .change

第三并.header从.header .change

Apply following CSS:

应用以下 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/

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

回答by Manish Shukla

Try this

尝试这个

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

Css will be

CSS 将是

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

回答by Cliff Ribaudo

Change this:

改变这个：

.header .change {

to this:

对此：

.header.change {

Note that I removed the space. When you want to indicate multiple styles on the SAME element there should not be a space. The space indicates you are targeting a style on a child element.

请注意，我删除了空格。当您想在 SAME 元素上指示多种样式时，不应有空格。空格表示您正在针对子元素上的样式。

回答by Manoj Kumar

check the linjsfiddlek here

在这里检查 lin jsfiddlek

jquery is

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

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

html

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

</div>