interface Web
js tutoriel
Méthode jQuery pour implémenter le défilement des couches flottantes avec la barre de défilement du navigateur_jquery
Méthode jQuery pour implémenter le défilement des couches flottantes avec la barre de défilement du navigateur_jquery
L'exemple de cet article décrit comment jQuery implémente la couche flottante pour faire défiler avec la barre de défilement du navigateur. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un effet de couche flottante implémenté par jQuery. Il défile avec la barre de défilement du navigateur et reste en haut. Veuillez utiliser Firefox pour tester. Les performances sous IE ne sont pas idéales.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/
Le code spécifique est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery浮动层随浏览器滚动条滚动</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
if ($.browser.version != "6.0") {
$(window).scroll(function(){
if($(this).scrollTop()>118 &&(($(document).height()-$(this).scrollTop())>($(window).height()+$(".aysw-footer").innerHeight()))){
$("#c_left").css({position: 'fixed', top: '2px'});
}else{
if(($(document).height()-$(this).scrollTop())<=($(window).height()+$(".aysw-footer").innerHeight())){
$("#c_left").css({position: 'absolute', top:($(".aysw-footer").offset().top-$("#c_left").innerHeight()-$(".page-home").offset().top-20) +'px'});
}else{
$("#c_left").css({position: 'absolute', top: '2px'});
}
}
});
}
</script>
</head>
<body style="height:auto; margin:0; padding:0">
<div style="height:118px;background:#6CF;">sadfsadfasfsafd</div>
<div class="page-home" style="min-height:1500px;width:100%; background-color:#FFC; position:relative">
<div id="c_left" style="border:1px solid red; width:200px ;height:800px; color:white;background-color:#333; position:absolute; top:2px">
羞涩的浮动层...
</div>
</div>
<div class="aysw-footer" style="height:200px; width:100%; background-color:#0C3; position:relative"></div>
</body>
</html>
J'espère que cet article sera utile à la programmation jQuery de chacun.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient?
Apr 05, 2025 am 07:48 AM
Réalisez l'effet d'écart de la disposition des coupons de carte. Lors de la conception de la disposition des coupons de carte, vous rencontrez souvent la nécessité d'ajouter des lacunes sur les coupons de carte, surtout lorsque l'arrière-plan est le gradient ...
Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web?
Apr 05, 2025 pm 10:33 PM
En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...
Comment obtenir des données d'application et de visionneuse en temps réel sur la page de travail 58.com?
Apr 05, 2025 am 08:06 AM
Comment obtenir des données dynamiques de la page de travail 58.com tout en rampant? Lorsque vous rampez une page de travail de 58.com en utilisant des outils de chenilles, vous pouvez rencontrer cela ...
Le style reste le même après les zooms de la page PC: quelles sont les solutions possibles?
Apr 05, 2025 am 07:51 AM
Le défi de garder le style de la page zoomé et le même après le zoom avant.
IconFont Icon s'affiche anormale par intermittence? Comment dépanner et résoudre des problèmes de codage
Apr 05, 2025 am 07:54 AM
iconfont ...
Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan?
Apr 05, 2025 pm 02:30 PM
La méthode de personnalisation des symboles de redimension dans CSS est unifiée avec des couleurs d'arrière-plan. Dans le développement quotidien, nous rencontrons souvent des situations où nous devons personnaliser les détails de l'interface utilisateur, tels que l'ajustement ...
Comment introduire correctement le fichier index.css de l'interface utilisateur des éléments et éviter les échecs de chargement de style?
Apr 05, 2025 pm 02:33 PM
Les meilleures pratiques concernant l'introduction des fichiers de style Electui que de nombreux développeurs utilisent élément ...
Comment personnaliser les symboles de redimensionnement via CSS pour correspondre à la couleur d'arrière-plan?
Apr 05, 2025 pm 02:09 PM
Comment personnaliser les symboles de redimensionnement avec CSS pour correspondre à la couleur d'arrière-plan? Dans la conception Web, les détails de l'expérience utilisateur peuvent souvent améliorer considérablement l'effet global. Par exemple...
