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>

我想要做的是：当用户进入li＃photo区域时，jQuery会将#navigator背景颜色更改为蓝色。如果用户继续向下滚动，他将输入li＃quote，当他进入该区域时，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
    });
  }

jQuery - 进入div区域时更改类（但不是用鼠标）

2 个答案: