Exemple d'effet flottant masquable avec jQuery
Mashable, mieux connu sous le nom de site Web de ressources de médias sociaux, a créé un effet flottant impressionnant lorsque l'utilisateur fait défiler la page. Voici une idée simple pour cloner cet effet flottant avec jQuery.
Idée…
-
Créez une boîte flottante.
-
Initialisez l'emplacement de la boîte flottante, placez-le à côté du contenu du corps.
-
Pendant que l'utilisateur fait défiler la page, continuez de vérifier la position de la barre de défilement.
-
Si la position y de la barre de défilement est supérieure à la position y de la boîte flottante, modifiez dynamiquement la position y de la boîte flottante.
-
Alors que la position y de la barre de défilement est inférieure à la position y de la boîte flottante, restaurez la position d'origine.
-
Utilisez jQuery, bien sûr.
1. Disposition HTML
Une mise en page HTML simple, un en-tête, un contenu et un pied de page, placent une «boîte flottante» div au-dessus du contenu.
header
content
Mashable floating effect example
2. Caisse flottante 90 × 200
C'est la boîte qui flottera en douceur pendant que les gens la feront défiler. Vous devrez peut-être ajuster un peu les“margin-left:-100px; ”en fonction de vos besoins.
#floating-box{
width:90px;
height:200px;
border:1px solid red;
background-color:#BBBBBB;
float:left;
margin-left:-100px;
margin-right:10px;
position:absolute;
z-index:1;
}
3. Pas de conflits, s'il vous plaît
Assurez-vous que jQuery n'a aucun conflit avec une autre bibliothèque. Je recommande vivement de le vérifier.
//avoid conflict with other script
$j=jQuery.noConflict();
$j(document).ready(function($) {
4. Position, position, position
Liez l'événement jQuery scroll () pour continuer à vérifier la position de la barre de défilement du navigateur.
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var isfixed = $floatingbox.css('position') == 'fixed';
if($floatingbox.length > 0){
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: -500
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: originalX
});
}
}
});
Si la position y de la barre de défilement est supérieure à la position y de la boîte flottante, changez la position y de la boîte flottante en "marginLeft: -500". Vous devrez peut-être personnaliser cette valeur en fonction de vos besoins.
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: -500
});
}
Si la position y de la barre de défilement est inférieure à la position y de la boîte flottante, rétablissez la position d'origine.
if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: originalX
});
}
5. Done
Essayez de lire l'exemple ci-dessous pour vous faire une idée des œuvres.
P.S This floating effect feature is implemented in my DiggDigg WordPress plugin.