Afficher une nouvelle Sidebar quand la première est Scrollée

Découvrez comment simplement afficher une nouvelle sidebar quand la première est totalement scrollée et ainsi éviter de faire apparaître un horrible espace vide pendant la lecture d’un billet par l’un de vos visiteurs. Pour réussir cet effet, qui sera sans nul doute remarquer, nous allons utiliser la bibliothèque jQuery pour calculer la position de notre visiteur dans notre page et ainsi pouvoir afficher une nouvelle sidebar quand la première n’est plus visible dans la fenêtre.
Ce code n’est évidemment passe-partout, il faut adapter le principe selon vos besoins et plus particulièrement aux différents éléments composants votre page.

Voici le code testé avec les versions desktops de: Chrome Version 35.0.1916.153 m / Firefox 30.0 / Opera 22.0.1471.50 / Internet Explorer 11.0. Le test sur les tablettes et mobiles ne sont pas jugés nécessaires, une autre version sans sidebar est à préférer.
La démo est disponible ici.

<html>
<head>
<title>DEMO NOUVELLE SIDEBAR</title>
<style>
body{
margin:0;padding:0;
}
#header{
background:red;
width:100%;
display:block;
position:fixed;
height:50px;
z-index:1000;
}
h1{
text-align:center;
font-size:25px;
}
#main{
margin-top:50px;
display:block;
width:70%;
background:#F2F2F2;
float:left;
}
#sidebar{
margin-top:50px;
display:block;
width:30%;
background:#81DAF5;
float:right;
}
#secondSidebar{
position:static;
width:30%;
float:right;
background: yellow;
z-index:-1000;
}
#footer{
clear:both;
background:cyan;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

$(window).scroll(function () {

// *** LES HAUTEURS ***
// la hauteur du header
var hauteurHeader = $('#header').height();
// la hauteur de la sidebar
var hauteurSidebar = $('#sidebar').height();
// la hauteur de la seconde sidebar
var hauteurSecondSidebar = $('#secondSidebar').height();
// la hauteur du main
var hauteurMain = $('#main').height();

// *** LES DISTANCES ***
// la distance scrollée depuis le haut de la fenêtre
var distanceTopWindow = $(window).scrollTop();
var distanceFooterTop = $('#footer').offset().top;

if(hauteurSidebar+hauteurSecondSidebar<hauteurMain){

if(distanceTopWindow > hauteurSidebar+hauteurHeader){
$('#secondSidebar').css({
'position': 'fixed',
'right' : 0,
'top' : hauteurHeader,
'display' : 'block'
});
}
else{
$('#secondSidebar').css({
'position' : 'static'
});
}

if(distanceFooterTop < (distanceTopWindow+hauteurSecondSidebar+hauteurHeader) ){
var topNew = distanceFooterTop-distanceTopWindow-hauteurSecondSidebar;
$('#secondSidebar').css({
'position': 'fixed',
'right' : 0,
'top' : topNew,
'display' : 'block'
});
}

}

});
});
</script>
</head>
<body>

</div>

<div id="header">

</div>

<div id="content">

<div id="main">
</div>

</div>

<div id="sidebar">
</div>

<div id="secondSidebar">
</div>

</div>

<div id="footer">
</div>

</body>
</html>
Publié dans jQuery

quand j’aurai le temps

  • les filtres wordpress
  • plugin wordpress et enregistrement de données
  • les wordpress custom post type
  • la bdd d'un blog wordpress
  • la balise more de wp
  • personnaliser une galerie wp
  • gérer les longueurs des extraits de wp
  • les animations css3
  • le memento symphony2
  • le squelette d'une page html5
  • liste sur plusieurs colonnes
  • le responsive design
  • exemple d'un jeu basique en html5
  • la réplication des bases de données
  • mettre en place une architecture en silo avec wp
  • parser un fichier xml (donc un rss) avec php5
  • mettre en place lightbox sans plugin
  • améliorer les performances de son wp
  • ajouter un bouton à l'éditeur de texte de wp
  • ...