jQuery - 在输入div区时改变类（但不是用鼠标）

Question

我遇到了很棒的功能，我会在这里解释一下。

我试图研究.js源代码，但由于我是新手，我无法破解缩小版本。 :(

比方说，我有以下标记：

<ul id="posts"> 

<li id="photo"> Lorem ipsum </li> 

<ii id="quote"> Lorem ipsum dolor </li> 

</ul> 

<div id="logo">My Logo</div> 

我想要做的是：当用户进入李＃照片区域，jQuery的将改变#navigator背景颜色，比方说，蓝色。如果用户一直向下滚动，他会输入li＃报价，当他进入该区域时，jQuery会将#navigator bg颜色更改为红色。

当我说“输入区域”时，我的意思是通过滚动和而不是鼠标悬停。

有一个Tumblr主题，那种做什么，我试图解释：

http://www.figueric.com/（向下滚动，看到右边的导航器）

我能想出的唯一的事情就是使用.addclass功能，但我不知道例如，在何处开始，特别是在识别用户正在查看li＃photo区域时。

你们能给我点光明吗？

Answer 1

jQuery有一个scroll()事件滚动时可以使用。你只需要得到子元素的位置，看看它们是否在当前视图中。

这里，你可以测试一个例子：http://jsfiddle.net/BKnzr/1/

CSS

html,body { 
    padding:0; 
    margin:0; 
    clip: auto; 
    overflow: hidden; 
} 

#navigator { 
    text-align: center; 
    background: green; 
    color: white; 
    position: absolute; 
    top: 150px; 
    right: 50px; 
    overflow: hidden; 
    width: 60px; 
    height: 250px; 
} 
#posts { 
    position:absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    overflow: auto; 
} 
#photo,#quote { 
    margin-top: 800px; 
    height: 300px; 
} 
​ 

HTML

<div id="navigator">Scroll down to change background</div> 

<ul id="posts"> 
    <li id="photo">photo section</li> 
    <li id="quote">quote section</li> 
</ul>​ 

jQuery的

// cache the elements 
var $nav = $('#navigator'); 
var $photo = $('#photo'); 
var $quote = $('#quote'); 
var $posts = $('#posts'); 

    // get the view area of #posts 
var top = $posts.offset().top; 
var bottom = top + $posts.height(); 

    // run code when #posts is scrolled 
$posts.scroll(function() { 
    if($quote.offset().top < bottom) { 
     $nav.css('backgroundColor', 'red'); 
    } else if ($photo.offset().top < bottom) { 
     $nav.css('backgroundColor', 'blue'); 
    } else { 
     $nav.css('backgroundColor', 'green'); 
    } 
}); 

Answer 2

我创建了jsbin演示：http://jsbin.com/ewuti4/edit

在文档或窗口的.scroll（）事件，检查.scrollTop（）属性，加上.height（），看看它是否大于任何元素的.offset（）。top属性。然后根据需要更改导航的样式或添加/删除类。

$(window).scroll(function(){ 
    if ($(window).scrollTop() + $(window).height() >= $('#quote').offset().top) 
    { 
    $('#nav').css({ 
     'backgroundColor': 'blue', 
     'border': '5px solid black', 
     'top': $(window).scrollTop(), 
     'left': 0 
    }); 
    }