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

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.