Bloquer div au scroll

Résolu

LaurentMtns Messages postés 269 Date d'inscription Statut Membre Dernière intervention -
moi - 17 déc. 2017 à 08:45

Bonjour, depuis quelques jours maintenant je tente de bloquer un rectangle en haut de ma page lorsque celui-ci y arrive.

Jusqu'à présent j'ai réussit à faire apparaître l'ombre (des que l'élément touche le haut du browser) via ce code JavaScript:

$(function () {
 
  var msie6 = $.browser == 'msie' && $.browser.version < 7;
 
  if (!msie6) {
    var top = $('#menu_haut').offset().top - parseFloat($('#menu_haut').css('margin-top').replace(300, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();
 
      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#menu_haut').addClass('fixed');
      } else {
        // otherwise remove it
        $('#menu_haut').removeClass('fixed');
      }
    });
  }  
});

et ce code CSS (sur une feuille à part):

#menu_haut {
	z-index:2;
	position: relative;
	margin-top:300px;
	margin-left:auto;
	margin-right:auto;
	max-width:1000px;
	height:80px;
	font-size:20px;
	background-color:#ebebeb;
}
.fixed {
	margin-left:auto;
	margin-right:auto;
	max-width:1000px;
	position: fixed;
	top: 0;
	margin-top: 0;
	z-index: 2;
	box-shadow: 0 5px 5px rgba(0,0,0,.5);
}

Voila le HTML du menu_haut:

<div id="menu_haut">
<table width="100%" height="100%" align="center">
	<tr>
		<td align="center">
			menu ici
		</td>
	</tr>
</table>
</div>

Bien que l'ombre apparaisse, l'élément ne reste pas fixer en haut de la page.

Merci de votre futur aide. ;-)

Bonne journée !
Laurent M.

Afficher la suite

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
Touche scroll lock ✓ - Forum Excel
Bloquer cellule excel - Guide

1 réponse

Réponse 1 / 1

mr_demonicon Messages postés 828 Date d'inscription Statut Membre Dernière intervention 126

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

<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.

LaurentMtns Messages postés 269 Date d'inscription Statut Membre Dernière intervention 51

Merci beaucoup ! J'ai utilisé ton code et ça marche parfaitement ;-)

Bonne journée !
Laurent M.

mr_demonicon Messages postés 828 Date d'inscription Statut Membre Dernière intervention 126

ben derien et bonne continuation

LaurentMtns Messages postés 269 Date d'inscription Statut Membre Dernière intervention 51

Bloquer div au scroll

1 réponse

Votre réponse

Discussions similaires