jQuery更改指定元素上的css

Question

当您滚动到特定元素时，我需要一些可以改变 div 样式的东西

例子：

在我的标题中，我有文本：1) 主页 2) 文本 2 3) 文本 3 4) 文本 4

在顶部时，我希望“Home”为白色，其他所有为蓝色 在第 1 段中，我希望“Text2”为白色，其他所有为蓝色 在第 2 段中，我希望“Text3”为白色，其他所有为蓝色在第 3 段中，我希望“Text4”为白色，其他所有为蓝色 在“Text4”下方时，我希望“Home”为白色，其他所有为蓝色

PS：“Text2”、“Text3”和“Text4”之间将没有其他内容

Answer 1

我会选择路标或skrollr 。 有很多关于skrollr的教程，所以请不要担心。

Answer 2

你可以做这样的事情

1. 使用scroll()监听滚动事件
2. 通过使用scrollTop()获取滚动顶部值

演示：

 $(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 3

检查以下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 4

您可以使用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> 

当该片段在视口中完全可见时，它将更改div背景

Answer 5

除非包含用于设置颜色的动画库，否则无法设置颜色动画。 jQuery默认不设置颜色动画 。

因此，对于颜色动画，您必须包括JQuery UI之类的库，但是对于仅使用颜色动画而言 ，它就很大。

相反，我建议您使用Bitstorm：ColorLibrary ，它的大小仅为2.7kb 。

JSFiddle：演示

 $(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) { $("#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> <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> <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 { display: block; width: 300px; 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> 

Answer 6

这会在匹配元素进入视图（或离开）时切换任何标题文本的颜色：

演示

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

下面的评论不再很相关，因为它们正在讨论的较早阶段。