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>

Я хочу сделать следующее: когда пользователь входит в область li # photo, jQuery меняет цвет фона #navigator наскажем, синий. Если пользователь продолжает прокручивать вниз, он вводит цитату li #, и когда он входит в область, jQuery меняет цвет #navigator bg на красный.

Когда я говорю «войти в область»Я имею в виду прокрутку, а не зависание мыши.

Существует тема Tumblr, которая как бы пытается объяснить:

http://www.figueric.com/ (прокрутите вниз и увидитенавигатор справа)

Единственное, что я могу придумать, - это использовать функцию .addclass, но я не знаю, с чего начать, особенно когда речь идет о распознавании того, что пользователь просматривает файл.# фотообласти, например.

Ребята, можете ли вы дать мне немного света здесь?

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