Por que existe tal demanda? Você encontrou alguns sites no exterior que, quando você rola para cima, a barra de navegação flutua na posição superior. Se os usuários desejam ver o conteúdo, eles podem clicar para alcançá -lo diretamente, o que economiza muito tempo de arrasto. Claro, é mais fácil voltar ao topo. Mas às vezes o botão de volta ao topo geralmente é esquecido. Vamos dar uma olhada no código e demonstração ( introduzindo o jQuery 1.9 ).
Para determinar se o mouse rola para cima ou rola para baixo, você pode comparar as coordenadas do último pergaminho do usuário com as coordenadas da próxima vez. Quando a última vez é menor que a próxima vez, ou seja, o usuário está rolando para baixo; caso contrário, significa que o usuário está rolando para cima. O valor da coordenada de rolagem pode ser usado como o scrolltop da janela.
Exemplo de código HTML
<div id = "jnav"> <ul> <li> <a href = "http://caibaojian.com/"> Desenvolvimento da Web Front-End </a> </li> <li> <a href = "#"> Front-End Development Blog </a> <li> <li> <a> lib = ""> HREF = "#"> Desenvolvimento de Front-end </a> </li> <li> <a href = "#"> Desenvolvimento de Front-end </a> </li> </ul> </div>
Exemplos de código JavaScript
var $ Nav = $ ('#JNAV'), Navtop = $ Nav.Offset (). Top, NavH = $ Nav.outerHeight (), Wintop_1 = 0, WinWidth = $ (Window) .Width (), Holder = JQuery ('<Div>); Holder.css (altura ', NAVH); mouse para rolar para cima e exibir se (wintop_2> wintop_1 && winwidth> 980) {$ Nav.removeclass ('fixo-nav-appear');Exemplo de código CSS
.nav {width: 980px; margem: 0 auto;}. Nav li {display: embloco embutido; *Display: Inline; *zoom: 1; margem: 0 10px;}. Nav li a {display: block; preenchimento: 5px 10px;}. fixo-nav {position: corrigido; largura: 100%; topo: -40px; -Webkit-transição: top .5s; -moz-transição: top .5s; -O-transição: top .5s; transição: 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);}. Fixo-Nav-Appear {Top: 0;}O exposto acima é o código de exemplo de como usar o JS para implementar a navegação flutuante quando o mouse rola para cima. Se você estiver interessado, consulte isso.