Bloquer div au scroll
Résolu/Fermé
LaurentMtns
Messages postés
269
Date d'inscription
mardi 22 octobre 2013
Statut
Membre
Dernière intervention
22 mars 2017
-
20 sept. 2014 à 10:25
moi - 17 déc. 2017 à 08:45
moi - 17 déc. 2017 à 08:45
A voir également:
- Bloquer div au scroll
- Bloquer pub youtube - Accueil - Streaming
- Bloquer sur messenger - Guide
- Comment savoir si on est bloqué sur Messenger ou Facebook ? - Guide
- Div c++ - Télécharger - Langages
- Bloquer cellule excel - Guide
1 réponse
mr_demonicon
Messages postés
828
Date d'inscription
dimanche 20 juillet 2014
Statut
Membre
Dernière intervention
9 avril 2016
126
Modifié par mr_demonicon le 20/09/2014 à 16:56
Modifié par mr_demonicon le 20/09/2014 à 16:56
mieux comme ça mais telecharge le jquery si tu veux l'utiliser (le jquery est non obligatoire mais le telecharger permet de charger plus rapidement la page et il permet pas mal d'option sur une page web dont la demo ici donc tu en aura besoin )
Ma source: https://desgeeksetdeslettres.com/web/menu-fixe-mais-flottant-selon-la-scrollbar-js-css
Bonne journee
Bonne continuation et n'oubliez pas le risque zéro c'est dans vos rêves.
Ma source: https://desgeeksetdeslettres.com/web/menu-fixe-mais-flottant-selon-la-scrollbar-js-css
<html>
<head>
<title>Menu fixe mais flottant</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
#example {
padding: 10px;
background-color: #CCC;
width: 950px;
}
#example.floatable {
position: fixed;
top: 0;
}
</style>
</head>
<body>
<ul>
<li>blabla</li><li>blabla</li><li>blabla</li><li>blabla</li><li>blabla</li>
</ul>
<p id="example">Mon texte fixe</p>
<ul>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
<li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li><li>bloblo</li>
</ul>
<script type="text/javascript">
// listen for scroll
var positionElementInPage = $('#example').offset().top;
$(window).scroll(
function() {
if ($(window).scrollTop() >= positionElementInPage) {
// fixed
$('#example').addClass("floatable");
} else {
// relative
$('#example').removeClass("floatable");
}
}
);
</script>
</body>
</html>
Bonne journee
Bonne continuation et n'oubliez pas le risque zéro c'est dans vos rêves.
21 sept. 2014 à 13:03
Bonne journée !
Laurent M.
21 sept. 2014 à 21:56
24 sept. 2014 à 21:53
17 déc. 2017 à 08:45