Dans cette vidéo, je vous montre comment accrocher un menu de partage dans la page, pour faire en sorte que ces boutons apparaissent toujours à côté de l'article, même lorsque les visiteurs font défiler le contenu de la page.

Attention, cette méthode ne fonctionne pas dans tous les cas. On verra cela ensemble dans la prochaine vidéo ;-)

Ressources



Le code HTML :

<div class="share">
   <img src="img/facebook.png" style="float:left;margin:7px 0 0 10px;" width="50px" height="50px"/>
   <img src="img/twitter.png" style="float:left;margin:7px 0 0 10px;" width="50px" height="50px"/>
</div>



Le code CSS :

.share{
     position:absolute;
     margin-left:-80px;
     margin-top:150px;
     width:70px;
     background:#EEE;
     height:120px;
     box-shadow:-3px 0 5px rgba(0,0,0,0.3);
}



Le code javascript :

$(function(){
   
  $(window).scroll(function(){
     
   $('.share').css('position','absolute');
     
   if($(window).scrollTop()>$('.share').offset().top-150){
      $('.share').css({'position':'fixed','top':0});
   }
     
  });
  
});


blog comments powered by Disqus


Nicolas Thomas

Passionné par le Web, je crée des sites Internet depuis plus de 10 ans.
Après avoir obtenu un Master d'Informatique et de Gestion, j'ai lancé mon Agence Web en 2010 et c'est avec plaisir que je mènerai à bien votre projet de création de site Internet, si vous m'en confiez la responsabilité.


Retourner à l'accueil