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/), si quelqu'un peut m'aider avec le codage ou toute ressource qui peut m'aider à créer la même chose. . Votre réponse m'aidera beaucoup.

P粉604507867 · Answer

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

P粉265724930 · Answer

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.