Maison >interface Web >js tutoriel >Jquery implémente la barre latérale corrigée après la barre de défilement (compatible avec IE6)_jquery

Jquery implémente la barre latérale corrigée après la barre de défilement (compatible avec IE6)_jquery

WBOY
WBOYoriginal
2016-05-16 16:53:461349parcourir

Certains sites Web d'achats utilisent cette fonction pour placer la navigation dans le panier d'achat ou dans la catégorie de produits, de sorte que lorsque la page du produit est très longue, la barre latérale peut toujours jouer le rôle qui lui revient. Certains sites Web utilisent cette fonction pour placer des publicités dans la barre latérale.

Code jQuery :

Copier le code Le code est le suivant :

var rollSet = $('#Roll');// Vérifiez l'objet, #sidebar-tab est l'ID à corriger avec la barre de défilement, qui peut être modifié selon les besoins
var offset = rollSet.offset ();
$( window).scroll(function () {
// Vérifiez si le haut de l'objet se trouve dans la plage visible du navigateur
var scrollTop = $(window).scrollTop( );
if(offset.top < ; scrollTop){
rollSet.addClass('fixed');
}else{
rollSet.removeClass('fixed');
}
});

Code CSS :
Copier le code Le code est tel suit :

.fixed{ position:fixed; top:20px;}
.fixed{_position:absolute; _top:expression((20 (noValue = document.documentElement.scrollTop ? document. documentElement.scrollTop : document.body.scrollTop)) 'px' );}//Compatible avec IE6
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn