Javascript 滚动后更改对象的颜色_Javascript_Jquery_Html

Javascript 滚动后更改对象的颜色

javascript jquery html

Javascript 滚动后更改对象的颜色,javascript,jquery,html,Javascript,Jquery,Html,我想做一个对象，可以改变颜色后滚动（向下）100px和改变回默认后滚动（向上）。我正在使用此代码，但不起作用 jQuery： $(window).scroll(function() { //After scrolling 100px from the top... if ( $(window).scrollTop() >= 100 ) { $('#menu').css('background', '#fff'); //Otherwise remove inline styles and

我想做一个对象，可以改变颜色后滚动（向下）100px和改变回默认后滚动（向上）。我正在使用此代码，但不起作用

jQuery：

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

}
});

和我的html：

<body>
<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>
</body>


标题

我将此代码用于杆顶菜单你可以为自己定制它，如果你不能说，那么我自己改变它，但如果你，你自己做会更好

   <script>
$('.top-menu').addClass('original').clone().insertAfter('.top-menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');

    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show();
    $('.original').css('visibility','hidden');
  } else {
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}
</script>


$（'.top-menu'）.addClass（'original'）.clone（）.insertAfter（'.top-menu'）.addClass（'clone'）.css（'position'，'fixed'）.css（'top'，'0'）.css（'margin-top'，'0'）.css（'z-index'，'500'）.removeClass（'original'）.hide（）；
scrollIntervalID=setInterval（stickIt，10）；
功能套件（）{
var orgementpos=$（'.original'）.offset（）；
orgElementTop=orgElementPos.top；
如果（$（窗口）.scrollTop（）>=（orgElementTop））{
orgElement=$（'.original'）；
coordsOrgElement=orgElement.offset（）；
leftOrgElement=coordsOrgElement.left；
widthOrgElement=orgElement.css（'width'）；
$（'.cloned'）.css（'left'，leftOrgElement+'px'）.css（'top'，0）.css（'width'，widthOrgElement+'px'）.show（）；
$（'.original'）.css（'visibility'，'hidden'）；
}否则{
$（'.cloned'）.hide（）；
$（'.original'）.css（'visibility'，'visible'）；
}
}

给你：

$(function(){
  var navColors = ['red', 'blue'];

  var changeNavState = function(nav, newStateIndex) {
    nav.data('state', newStateIndex).stop().css({
      backgroundColor : navColors[newStateIndex]
    });    
  };

  var boolToStateIndex = function(bool) {
    return bool * 1;    
  };

  var maybeChangeNavState = function(nav, condState) {
    var navState = nav.data('state');
    if (navState === condState) {
      changeNavState(nav, boolToStateIndex(!navState));
    }
  };

  $('#header_nav').data('state', 1);

  $(window).scroll(function(){
    var $nav = $('#header_nav');

    if ($(document).scrollTop() > 100) {
      maybeChangeNavState($nav, 1);
    } else {
      maybeChangeNavState($nav, 0); 
    }
  });
});

什么东西在这里不起作用？你们有什么地方做错了，或者你们不能做什么？为什么你们的表格在页眉？它应该在代码中，但它不起作用