jQuery - Changer de classe lors de la saisie de la zone div (mais pas avec la souris)

Question

Je suis tombé sur de super sites qui avaient une fonctionnalité intéressante, que je vais essayer d'expliquer ici.

J'ai essayé d'étudier les sources .js, mais comme je suis un novice, je ne pouvais pas déchiffrer les versions minifiées. :(

Disons que je le balisage suivant:

<ul id="posts"> 

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

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

</ul> 

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

Ce que je veux faire est: lorsque l'utilisateur entre dans la zone li # photo, jQuery changerait la couleur de fond de #navigator, disons, bleu Si l'utilisateur continue à défiler vers le bas, il entrera la citation li #, et quand il entre dans la zone, jQuery changera #navigator bg couleur en rouge

Quand je dis "entrer dans la zone", je veux dire par défilement et pas par la souris planant

Il y a un thème Tumblr ce genre de Est-ce que ce que je suis en train d'expliquer:

http://www.figueric.com/ (défilement vers le bas et voir le navigateur à droite)

La seule chose que je peux trouver est d'utiliser la fonction .addClass, mais je ne sais pas où commencer, en particulier quand il s'agit de reconnaître que l'utilisateur regarde la zone de photo li #, par exemple.

Pouvez-vous me donner un peu de lumière ici?

Answer 1

jQuery a un événement scroll() vous pouvez utiliser lors du défilement. Vous avez juste besoin d'obtenir la position des éléments enfants et de voir s'ils sont dans la vue actuelle.

Voici un exemple que vous pouvez tester: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

J'ai créé une démo sur jsbin: http://jsbin.com/ewuti4/edit

Lors de l'événement de .scroll() de ce document ou une fenêtre, vérifiez la propriété .scrollTop(), plus le .height(), et voir si elle supérieure à tout élément de .offset(). propriété supérieure. Puis modifiez le style de votre nav ou ajoutez/supprimez une classe selon le cas.

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