Il suffit de positionner: fixe, plutôt que d'épingler un site en-tête ou de navigation dans un style, les en-têtes qui apparaissent en réponse à l'effacement de défilement loin et l'écran est beaucoup mieux. L'en-tête qui réagit au défilement est un logo de site, menu, barre de navigation, etc qui peut fournir une expérience utilisateur plus efficace et agréable.
Pourquoi vous devez écrire en-têtes qui répondent au défilement
Il ya beaucoup de gens qui veulent toujours montrer l'en-tête et la barre de navigation à l'utilisateur, le haut de l'écran 100px moins que beaucoup d'espace, le logo et le menu du blog sur votre site, etc Cela peut ne pas beaucoup d'importance sur les écrans de bureau. Cependant, en moyenne, les utilisateurs mobiles qui ne 600px pas la taille verticale sont toujours obscurcis par un minimum d'un sixième de l'écran (compte tenu de la navigation de leur propre navigateur, mais aussi environ 1/3 ~ 1/4), l'utilisateur ne peut pas masquer ou de contrôle est assez violent (?) Inconfort.
Pour cette raison, vous devez répondre pour votre commodité ou de navigation (avec la pensée subjective) et toujours garder l'en-tête en haut de l'écran. Si vous voulez un en-tête qui est toujours implémenté, l'en-tête disparaît lorsque l'utilisateur défile ou touche le contenu si vous voulez lire le contenu ou écrire un menu, ou utilisez la fonction de navigation pour faire défiler vers le haut ou toucher l'écran, alors vous devez mettre en œuvre un en-tête qui apparaît à nouveau (bien sûr, cette approche peut être gênant pour les utilisateurs qui veulent voir le ci-dessus à nouveau). Si vous n'allez pas mettre en œuvre personnellement, nous vous recommandons de ne pas simplement utiliser position: fixe.
3 étapes pour créer un en-tête qui réagit au défilement
Il existe plusieurs façons de créer des en-têtes qui répondent au défilement. Mais considérez les normes Web qui sont exprimées dans n'importe quel environnement, je recommande d'utiliser jQuery plutôt que d'utiliser des méthodes telles que CSS. Gkkmon (Awake) mais aussi essayer de ne pas utiliser JavaScript ou jQuery (parce qu'il est plus susceptible de lag en termes de vitesse ou de ressources que d'utiliser les fonctions de base). l'en-tête qui réagit au défilement est parce que la méthode JQuery a montré de grandes normes Web sans sacrifier les performances de manière significative.
Pour utiliser jQue
ry 1. Importer le plugin JQuery.
2. Vous déclarez un script à utiliser par le plug-in JQuery importé.
3. Vous avez besoin de toucher HTML, PHP, et CSS.
Chargement du plug-in JQuery
Le plugin pour créer des en-têtes qui répondent au défilement est la version jQuery-2.2.2. Pour charger ce plugin
<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
.
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
, vous pouvez utiliser cette méthode parce que la version a un min derrière elle, qui est le même code, mais vous permet de charger plus rapidement en supprimant l'espace et ainsi de suite.
Déclaration de scripts dans le plug-in JQuery importé
Une fois que vous avez appelé le plug-in, vous devez déclarer le script que vous voulez utiliser.
<script></script>
$ (Function {) {
var lastscrolltop = 0,
Delta = 15;
$ (fenêtre). Scroll (Function (Event) {
var St = $ (this). ScrollTop ();
if (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ ("nom de l'élément"). CSS ("haut", "-masquer la hauteur");
Autre
$ ("nom de l'élément"). CSS ("Top", "0px");
}
Lastscrolltop = St;
});
});
Placez la classe ou l'ID de l'élément que vous souhaitez contrôler dans le nom de l'élément. Généralement mis dit. Header. Vous devez définir la hauteur ou plus élevé de l'élément à masquer, car il fera sauter l'écran avec la lumière-PX lorsqu'il est masqué. Height: Si vous voulez contrôler le nom de classe 50px. Header
<script></script>
$ (Function {) {
var lastscrolltop = 0,
Delta = 15;
$ (fenêtre). Scroll (Function (Event) {
var St = $ (this). ScrollTop ();
if (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ (". Header"). CSS ("Top", "-50px");
Autre
$ (". Header"). CSS ("Top", "0px");
}
Lastscrolltop = St;
});
});
. Le contenu de ce script est, "si le défilement tactile ou de la souris détecte que l'écran est en panne, cela signifie de changer le haut CSS de l'en-tête. en-50px, et de changer le haut CSS de l'en-tête en 0px lorsque le défilement est en place."
CSS spécifie le style des éléments, et Top spécifie la position à partir du haut de l'écran de l'élément spécifié par la propriété position. En d'autres termes, le haut de l'écran 0px et-50px pour aller et retour.
Changer CSS pour correspondre au script avec jQuery
Enfin, vous pouvez changer le CSS en fonction des paramètres jQuery.
<style></style> En-tête Position: fixe; /* Position: Fix avec fixe */ Z-index: 20; /* Définir un z-index approprié car il peut être masqué par d'autres éléments */ Largeur: 100%; /* Écran 100% taille horizontale et */ Hauteur: 50px; /* Faire un en-tête de 50px verticalement */ Box-dimensionnement: Border-Box; Transition: ALL 0,2 s Ease; /* Disparaît quand il apparaît et donne l'effet qu'il semble lisse, pas besoin de mettre */ -WebKit-transition: ALL 0,2 s Ease; -Moz-transition: ALL 0,2 s Ease; -O-transition: ALL 0,2 s Ease; }
Avec les trois, nous pouvons répondre au rouleau et de créer un grand en-tête qui ressemble à elle disparaît.
Le code fini
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script></script>
$ (Function {) {
var lastscrolltop = 0,
Delta = 15;
$ (fenêtre). Scroll (Function (Event) {
var St = $ (this). ScrollTop ();
if (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ (". Header"). CSS ("Top", "-50px");
Autre
$ (". Header"). CSS ("Top", "0px");
}
Lastscrolltop = St;
});
});
<style></style>
En-tête
Position: fixe;
Z-index: 20;
Largeur: 100%;
Hauteur: 50px;
Box-dimensionnement: Border-Box;
Transition: ALL 0,2 s Ease;
-WebKit-transition: ALL 0,2 s Ease;
-Moz-transition: ALL 0,2 s Ease;
-O-transition: ALL 0,2 s Ease;
}
Si vous le définissez comme décrit, vous pouvez facilement avoir un en-tête de haute qualité qui offre une grande expérience utilisateur. Ce n'est pas une grosse affaire, alors nous allons le fixer pour votre site ou blog 24/7, toujours pour un en-tête flottant. Je sais que je suis familier avec le site, l'en-tête est toujours fixe et à l'écran comme'Toolbar', car il donne à l'utilisateur la pire expérience utilisateur.