Comment créer une barre de titre collante pour votre site Web

Question

Je souhaite créer une barre de titre collante pour mon site Web, tout comme l'en-tête collant de ce site Web (http://www.fizzysoftware.com/), s'il y a quelqu'un qui peut m'aider avec le codage ou toute ressource qui peut m'aider je crée la même chose. Votre réponse m'aidera beaucoup.

Answer 1

Si vous souhaitez qu'il reste collant lorsque vous faites défiler jusqu'à un certain point, vous pouvez utiliser cette fonction :

$window = $(window);
$window.scroll(function() {
  $scroll_position = $window.scrollTop();
    if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
        $('.your-header').addClass('sticky');

        // to get rid of jerk
        header_height = $('.your-header').innerHeight();
        $('body').css('padding-top' , header_height);
    } else {
        $('body').css('padding-top' , '0');
        $('.your-header').removeClass('sticky');
    }
 });

et cours collant :

.sticky {
  position: fixed;
  z-index: 9999;
  width: 100%;
}

Vous pouvez utiliser ce plugin, il propose quelques options utiles

Titre collant jQuery

Answer 2

Ajouter en CSS

position: fixed;

à votre élément de titre. C'est vraiment aussi simple que cela. La prochaine fois, essayez de cliquer avec le bouton droit sur quelque chose que vous voyez sur un site Web et de sélectionner « Inspecter l'élément ». Je pense que tous les navigateurs modernes l'ont désormais. Fonctionnalité très utile.