Comment implémenter une navigation flottante lorsque la souris fait défiler avec JS

Pourquoi y a-t-il une telle demande? Avez-vous trouvé des sites Web à l'étranger que lorsque vous faites défiler, la barre de navigation flotte en position supérieure. Si les utilisateurs veulent voir le contenu, ils peuvent cliquer pour l'atteindre directement, ce qui fait gagner beaucoup de temps. Bien sûr, il est plus facile de revenir au sommet. Mais parfois, le bouton en haut est souvent négligé. Jetons un coup d'œil au code et à la démonstration ( introduisant jQuery 1.9 ).

Pour déterminer si la souris défile vers le haut ou fait défiler vers le bas, vous pouvez comparer les coordonnées du dernier défilement de l'utilisateur avec les coordonnées de la prochaine fois. Lorsque la dernière fois est inférieure à la prochaine fois, c'est-à-dire que l'utilisateur fait défiler vers le bas, sinon, cela signifie que l'utilisateur fait défiler. La valeur de coordonnée de défilement peut être utilisée comme défilement de la fenêtre.

Exemple de code HTML

 <div id = "jnav"> <ul> <li> <a href = "http://caibaojian.com/"> web front-end Development </a> </li> <li> <a href = "#"> Blog de développement frontal </a> </li> <li> <a href = "#"> Front-End Development </a> href = "#"> Développement frontal </a> </li> <li> <a href = "#"> Développement frontal </a> </li> </ul> </div>

Exemples de code javascript

 var $ nav = $ ('# jnav'), navtop = $ nav.offset (). top, navh = $ nav.outerHeight (), wintop_1 = 0, winwidth = $ (window) .width (), holder = jQuery ('<div>'); $ (window) .on ('scroll', function () {var wintop_2 = $ (window). Holding.CSS (Hauteur ', NAVH); Pour faire défiler et afficher si (wintop_2> wintop_1 && winwidth> 980) {$ nav.removeclass ('fixe

Exemple de code CSS

 .nav {largeur: 980px; marge: 0 auto;}. Nav li {affichage: bloc en ligne; * Affichage: en ligne; * Zoom: 1; marge: 0 10px;}. Nav li a {affichage: bloc; rembourrage: 5px 10px;}. Fixed-nav {position: fixe; Largeur: 100%; en haut: -40px; -Webkit-Transition: Top .5S; -Moz-Transition: Top .5S; -o-transition: Top .5S; Transition: Top .5S; -webkit-box-shadow: 0 2px 2px rgba (0,0,0, .1); -moz-box-shadow: 0 2px 2px rgba (0,0,0, .1); Box-Shadow: 0 2px 2px RGBA (0,0,0, .1);}. Fixed-Nav-Apparet {top: 0;}

Ce qui précède est l'exemple de code sur la façon d'utiliser JS pour implémenter la navigation flottante lorsque la souris fait défiler. Si vous êtes intéressé, veuillez y consulter.