jQuery: Pouvez-vous rendre un élément stick onScroll SANS utiliser la position css: fixed?

Ou quelqu'un peut-il me dire une autre façon de le faire (sans utiliser un plugin s'il vous plaît)jQuery: Pouvez-vous rendre un élément stick onScroll SANS utiliser la position css: fixed?

J'ai une navigation latérale sur la gauche et du contenu vers la droite. Les deux éléments sont flottants à gauche.

Je veux que le nav latéral «colle» quand il arrive à 125px du haut de la fenêtre, une fois fait défiler la page. Je me sens comme si j'étais proche, mais je ne suis définitivement pas encore là! Avec le code que j'ai écrit, le nav latéral «saute» en haut de la fenêtre une fois que nous avons fait défiler la position correcte de la fenêtre et que nous revenons à la position où je veux qu'elle «colle».

L'autre problème, c'est qu'une fois la classe .stick appliquée, l'élément est retiré du flux de documents (parce que j'applique une position: fixed;) et le .content se déplace vers la gauche pour prendre Sa place.

Voici un codepen: http://codepen.io/MandyMadeThis/pen/DLtsJ

** NOTE: Il semble que je ne peux pas recréer le côté nav « sauter » en haut de la fenêtre de défilement, donc je fais pas ce que tout est une question , mais j'aimerais toujours savoir la bonne façon de le faire sans que le contenu ne bouge vers la gauche. **

Si quelqu'un peut me guider dans la bonne direction, ce serait merveilleux. Je vous remercie.

Voici mon démarquage:

<body> 
<nav>navigation content</nav> 
<header>header content</header> 
<div class="container clearfix"> 
    <div class="side-nav">THIS IS THE THING I WANT TO STICK</div> 
    <div class="content">This needs to stay to the right of the .side-nav</div> 
</body>

Voici le CSS:

.side-nav { 
    float: left; 
    position: relative; 
    top: -17px; 
    width: 23%; 
    margin-right: 2%; 
} 

.content { 
    width: 70%; 
    float: left; 
} 

.stick { 
    position:fixed; 
    top:0px; 
    margin-top: 125px; 
}

Et voici mon jQuery:

var sn = $(".side-nav"); 
var pos = sn.position(); 
$(window).scroll(function() { 
    var windowPos = $(window).scrollTop(); 
    if (windowPos >= pos.top - 125) { 
     sn.addClass("stick"); 
    } else { 
     sn.removeClass("stick"); 
    } 
});

Source

2014-07-16 MandyMadeThis

Pour corriger cela, vous avez simplement besoin d'ajouter un margin-left à .content et supprimer float. De cette façon, la position du contenu ne dépend pas de la présence du nav.

.content { 
    width: 70%; 
    margin-left: 25%; 
}

http://codepen.io/anon/pen/jbCix

Source

2014-07-16 22:56:20 imtheman

OH MAN! Je savais que c'était quelque chose de très simple que je ne voyais pas! Merci – MandyMadeThis

Pas de problème. Heureux d'avoir pu aider. – imtheman

jQuery: Pouvez-vous rendre un élément stick onScroll SANS utiliser la position css: fixed?

Répondre

Questions connexes