Изменение цвета объектов после прокрутки

Я хочу сделать объект, который может изменить цвет после прокрутки (вниз) 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>

источник

2015-06-28 Dr Franklystine

Переместить таблицу в теле. – dfsq

Что здесь не работает? Что вы ошибаетесь или что вы не можете сделать? –

Почему ваша таблица в заголовке? Он должен быть в теле – Newinjava

Здесь вы идете:

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

http://jsfiddle.net/2rqp6r6z/

источник

2015-06-28 07:01:25 AlienWebguy

Я использую этот код для верхнего меню палочки вы можете настроить его для себя и если бы вы не могли просто сказать, то я изменил бы это сам, но если вы сами сделаете это лучше

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

источник

2015-06-28 06:56:59 poOrya

no я могу это сделать, и им нужно, чтобы ваш cood все равно для моего другого. Благодаря.. –

Изменение цвета объектов после прокрутки

ответ

Смежные вопросы