Question

我在滚动100px之后尝试使用固定标题更改其背景颜色，然后在使用以下jQuery向后滚动后再次更改为默认标题：

这是我的实际代码。

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).scroll(function() {

//After scrolling 100px from the top...
if ( $(window).scrollTop() >= 100 ) {
    $('#menu').css('background', '#fff');

//Otherwise remove inline styles and thereby revert to original stying
} else {
    $('#menu').removeAttr('style');

}
});
</script>
</head>
<body>

<header>
<table>
<tr>
<td  id="menu" class="title">
    TITLE
</td>
<td style="width:40px;">
    <div class=" ico">    
    <img src="search.svg" alt="search" style="width: 25px;" />
    </div>
    </td>
    <td style="width: 40px;">
    <div class=" ico">
    <img src="menu.svg" alt="search" style="width: 25px;"/>
    </div>
</td>
</tr>
</table>
</header>
.
.
.
</body>
</html>

任何人都可以识别我的问题吗？

Answer 1

jQuery(document).scroll(function() {
var y = jQuery(this).scrollTop();
    if (y > 100) {
        jQuery('#menu').addClass('scrollActive');
    } else {
        jQuery('#menu').removeClass('scrollActive');
    }
});

并添加您的CSS

#menu.scrollActive {
  background-color: blue; // or color what you want;
}

Answer 2

更改

 $(window).scrollTop() >= 10

到

  $(window).scrollTop() >= 100

我在滚动页面100px后尝试使固定标题更改为背景颜色

2 个答案: