¿Por qué hay tal demanda? ¿Ha encontrado algunos sitios web en el extranjero que cuando se desplaza hacia arriba, la barra de navegación flota en la posición superior? Si los usuarios quieren ver el contenido, pueden hacer clic para alcanzarlo directamente, lo que ahorra mucho tiempo de arrastre. Por supuesto, es más fácil volver a la cima. Pero a veces el botón de regreso a la parte superior a menudo se pasa por alto. Echemos un vistazo al código y la demostración ( introduciendo jQuery 1.9 ).
Para determinar si el mouse se desplaza hacia arriba o se desplaza hacia abajo, puede comparar las coordenadas del último desplazamiento del usuario con las coordenadas de la próxima vez. Cuando la última vez es menor que la próxima vez, es decir, el usuario se desplaza hacia abajo, de lo contrario, significa que el usuario se está desplazando hacia arriba. El valor de la coordenada de desplazamiento se puede utilizar como el cementerio de desplazamiento de la ventana.
Ejemplo de código HTML
<div id = "jnav"> <ul> <li> <a href = "http://caibaojian.com/"> Desarrollo de front-end web </a> </li> <li> <a href = "#"> front-end desarrollo blog </a> </li> <li> <a href = "#"> desarrollo frontal href = "#"> Desarrollo front-end </a> </li> <li> <a href = "#"> Desarrollo front-end </a> </li> </ul> </div>
Ejemplos de código JavaScript
var $ nav = $ ('#jnav'), navtop = $ nav.offset (). top, navh = $ nav.outerHeight (), wintop_1 = 0, winwidth = $ (window) .width (), holder = jQuery ('<div>); $ (ventana) .on (' scroll ', function () {var wintop_2 = $ (window). Holder.css ('altura', navh); Desplácese hacia arriba y Mostrar if (WinTop_2> WinTop_1 && WinWidth> 980) {$ NAV.REMOVECLASS ('fijo-nav-aparar');Ejemplo de código CSS
.nav {ancho: 980px; margen: 0 auto;}. Nav Li {Display: Inline-Block; *Pantalla: en línea; *Zoom: 1; margen: 0 10px;}. Nav Li A {Display: Block; Relador: 5px 10px;}. Nav fijo {posición: fijo; Ancho: 100%; arriba: -40px; -WebKit-Transition: Top .5s; -Moz-Transition: Top .5s; -O-transición: top .5s; Transición: Top .5s; -webkit-box-shadow: 0 2px 2px rgba (0,0,0, .1); -Moz-box-shadow: 0 2px 2px rgba (0,0,0, .1); shadow de caja: 0 2px 2px rgba (0,0,0, .1);}. fijo-falla {top: 0;}Lo anterior es el código de ejemplo de cómo usar JS para implementar la navegación flotante cuando el mouse se desplaza hacia arriba. Si está interesado, consultelo.