JQuery изменить CSS на указанном элементе

Question

мне нужно что-то, что изменит стиль DIV при прокрутке к определенному элементу

Пример:

В моем заголовке я есть тексты: 1) Главная 2) Text2 3) Text3 4) Text4

Когда на вершине я хочу, чтобы «Home», чтобы быть белым, а все остальные синий Когда на пункте 1 я хочу, чтобы «Text2» белый и все другие синий Когда в пункте 2 Я хочу, чтобы «Text3» белый и все остальные синие Когда в пункте 3 я хочу, чтобы «Text4» белый и все остальные синие Когда ниже «Text4» я хочу, чтобы «Home» был белым, а все остальные синим

PS: "Text2", "Text3" и "Text4" не будет иметь ничего другого в betwheen

Answer 1

Это переключает цвет любого текста заголовка в точке согласующий элемент попадает в поле зрения (или листьев):

Demo

$(function() { 

var gate = $(window), 
bar = $('header'), 
title = bar.find('span'), 
element = $('.element'), 
viewin, viewout; 

gate.on('load resize', function() { 

    viewin = []; viewout = []; 

    element.each(function() { 

    var placement = $(this).offset().top-gate.height(), 
    dimension = $(this).outerHeight(); 

    viewin.push(placement); 
    viewout.push(placement+dimension); 
    }); 
}) 
.scroll(function() { 

    var location = gate.scrollTop(); 

    element.each(function(i) { 

    var option = title.eq(i), white = option.hasClass('white'); 

    if (location > viewin[i] && location <= viewout[i]) { 
    if (!white) option.addClass('white'); 
    } 
    else if (white) option.removeClass('white'); 
    }); 
}); 
}); 

Комментарии ниже более не актуальны, потому что они обсуждают более ранний этап.

Answer 2

Я бы пойти с waypoints или skrollr. Есть много уроков о skrollr, поэтому не беспокойтесь.

Answer 3

Вы можете сделать что-то вроде этого

1. Использование scroll() слушать событие Scroll
2. Получить свитка верхнее значение с помощью scrollTop()

DEMO:

$(window).scroll(function() { 
 
    $('#div2').css('color', $(this).scrollTop() > 390 ? 'red' : 'blue'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id=main style="height:1000px"> 
 
    <div id=div2 style="margin-top:500px">element</div> 
 
</div>

Answer 4

Проверьте следующие функции JQuery

• scroll
• scrollTop
• offset
• each
• attr

Ваш код может выглядеть примерно так:

(function($) { 
 
    
 
    $(window).scroll(function(e){ 
 

 
     var home = $('#home'); 
 
     var switchPosition = $(window).scrollTop() + parseInt(home.css("top"))+30; 
 
     
 
     $('.text').each(function(){ 
 

 
      if (switchPosition > $(this).offset().top && 
 
       $(this).attr('data-color') !== home.attr('data-color')) { 
 

 
       home.css({color: $(this).attr('data-color')}); 
 
       home.attr('data-color', $(this).attr('data-color')); 
 

 
      }    
 

 
     }); 
 

 
    }); 
 

 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="home" style="font-weight: bold; color: blue; position: fixed; top: 20px; left: 20px;">HOME</div> 
 
<div style="color: white; position: fixed; top: 170px; left: 20px;">scroll down...</div> 
 

 
<div class="text" data-color="blue" style="background: #999; height: 500px"> </div> 
 
<div class="text" data-color="red" style="background: #666; height: 500px"> </div> 
 
<div class="text" data-color="white" style="background: #333; height: 1000px"> </div>

Answer 5

Вы можете использовать jQuery-

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop()+$(window).height() > $('.yay').offset().top + $('.yay').outerHeight()) { 
 
     $('.yay').css('background', 'black'); 
 
    } else { 
 
     $('.yay').css('background', 'red'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="background:blue;height: 2000px;color:white;font-size:30px;">Scroll Down</div> 
 
<div class="yay" style="background:red;height: 200px;"></div> 
 
<div style="background:blue;height: 300px;color:white;font-size:30px;">Scroll Up</div>

Этот фрагмент кода будет изменить фон Див, когда он становится полностью видимым в окне

Answer 6

оживляющий цвет не работает, если не включать в себя библиотеку для анимации цвета. jQuery не является живым цветом по умолчанию.

Так что для цветовой анимации вы должны включать в себя библиотеку, как JQuery UI, но большой для просто используя цветовую анимацию.

Вместо этого я хотел бы предложить вам использовать Bitstorm:ColorLibrary, это просто 2.7kb в размере.

JSFiddle : DEMO

$(document).ready(function(){ 
 
    var top = document.getElementById("css_text").scrollHeight; // top position of '#css_text' 
 
    alert("Top position of #CSS_TEXT : " + top); 
 
    var calcu = top - 20; 
 
$(window).scroll(function(){ 
 
    var pos = $(window).scrollTop(); 
 
    if(pos >= calcu) 
 
    { 
 
\t \t $("#css_text").animate({"color":"red","opacity":"1"},2000); 
 
    } 
 
}); 
 
});

#css_text 
 
{ 
 
    opacity:0; 
 
    color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script> 
 

 
<h1>HTML Ipsum Presents</h1> 
 
\t   
 
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
<h2>Header Level 2</h2> 
 
\t   
 
<ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ol> 
 

 
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> 
 

 
<h3>Header Level 3</h3> 
 

 
<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ul> 
 

 
<pre id="css_text"><code> 
 
#header h1 a { 
 
\t display: block; 
 
\t width: 300px; 
 
\t height: 80px; 
 
} 
 
</code></pre> 
 
<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    <li>Vestibulum auctor dapibus neque.</li> 
 
</ul>