Un hr dynamique

 

Par ce titre qui ne veut rien dire, je parle en fait d’une barre, fin ou début de section, qu’on a l’habitude de faire soit en utilisant une image en background sur un pseudo element (xxx:after{…} )
ici pour l’exemple, je dessine une barre sous mon menu.Le site est composé d’une sidebar à gauche et du contenu à droite.
voici un gif pour illustrer mon propos
rave

comme on peut le voir, en scrollant la page, le hr qui se prolonge sur la sidebar disparait, puis revient des qu’on revient à la bonne hauteur.Ceci pour éviter

Voici le code : dans ma page, je place en dur dans le code une balise <hr/>

puis dans un fichier js à part :

  
  jQuery(document).ready(function() {

jQuery(document).scroll(function(){
    if(jQuery(this).scrollTop() > 1)
    {   
        jQuery('hr').css({"margin-left":"-32px "});
     
    }else{
        jQuery('hr').css({"margin-left":"-22.6em"});
    }
});
});

les mesure sont ici complètement aléatoires, mais le principe est la: à l’état normal le hr déborde sur la sidebar avec un margin négatif, puis au scroll, on lui enlève ce margin-left pour le faire coller à la sidebar sans dépasser.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.