왜 그런 요구가 있습니까? 해외 웹 사이트를 발견했을 때 스크롤 할 때 탐색 막대가 상단 위치에 부유 한 웹 사이트를 찾았습니까? 사용자가 콘텐츠를보고 싶다면 컨텐츠를 클릭하여 직접 도달하여 많은 시간을 절약 할 수 있습니다. 물론, 정상으로 돌아 가기가 더 쉽습니다. 그러나 때로는 맨 위로 다시 버튼이 간과됩니다. 코드와 데모를 살펴 보겠습니다 ( jQuery 1.9 소개 ).
마우스가 위로 스크롤하거나 아래로 스크롤하는지 여부를 결정하려면 사용자의 마지막 스크롤의 좌표와 다음 시간의 좌표를 비교할 수 있습니다. 마지막 시간이 다음 시간보다 작을 때, 즉 사용자가 아래로 스크롤하고 그렇지 않으면 사용자가 스크롤하고 있음을 의미합니다. 스크롤 좌표 값은 창의 스크롤 탑으로 사용할 수 있습니다.
HTML 코드 예제
<div id = "jnav"> <ul> <li> <a href = "http://caibaojian.com/"> 웹 프론트 엔드 개발 </a> </li> <li> <a href = "#"> 프론트 엔드 개발 블로그 </a> </li> <li> <a href = "#"</li> </li>>> <li>> <li>> <li>> <li>> href = "#"> 프론트 엔드 개발 </a> </li> <li> <a href = "#"> 프론트 엔드 개발 </a> </li> </ul> </div>
JavaScript 코드 예제
var $ nav = $ ( '#jnav'), navtop = $ nav.offset (). 상단, navh = $ nav.outerheight (), wintop_1 = 0, winwidth = $ (Window) .width (), jquery = jquery ( '<div>'); $ (창) holder.css ( '높이', If는 navtop && 980을 표시하지 않습니다 if (wintop_2> wintop_1 && winwidth> 980) {$ nav.removeclass (wintop_2 <wintop_1) {$ nav.addclass ( '고정--아파트');CSS 코드 예제
.nav {너비 : 980px; 마진 : 0 Auto;}. Nav Li {디스플레이 : 인라인-블록; *디스플레이 : 인라인; *줌 : 줌 : 줌 : 줌 : 1; 1; 여백 : 0 10px;}. Nav Li a {display : block; 패딩 : 5px 10px;}. 고정 NAV {위치 : 고정; 너비 : 100%; 상단 : -40px; -webkit-transition : 상위 .5; -Moz-transition : 상위 .5; -O- 전달 : 상위 .5; 전환 : 상위 .5; -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);}. 고정 NAV-APPEAR {TOP : 0;}위의 것은 마우스가 스크롤 할 때 JS를 사용하여 플로팅 내비게이션을 구현하는 방법의 예제 코드입니다. 관심이 있으시면 참조하십시오.