Почему есть такой спрос? Вы нашли несколько веб -сайтов за границей, которые, когда вы прокручиваете вверх, навигационная панель плавает в верхней позиции. Если пользователи хотят видеть контент, они могут нажать, чтобы достичь его напрямую, что экономит много времени перетаскивания. Конечно, легче вернуться на вершину. Но иногда кнопка обратно к вершине часто упускается из виду. Давайте посмотрим на код и демонстрацию ( представляя jQuery 1.9 ).
Чтобы определить, прокручивается ли мыши вверх или прокручивать вниз, вы можете сравнить координаты последнего прокрутки пользователя с координатами следующего времени. Когда в последний раз меньше, чем в следующий раз, то есть пользователь прокручивается вниз, в противном случае это означает, что пользователь прокручивает. Значение координаты прокрутки может использоваться в качестве прокрутки окна.
HTML -код пример
<div id = "jnav"> <ul> <li> <a href = "http://caibaojian.com/"> веб-фронт-разработка </a> </li> <li> <a href = "#"> Front-Cend Development Blog </a> </li> <li> <a href = "#"> Front-Dend Development </a> href = "#"> Front-End Development </a> </li> <li> <a href = "#"> Front-End Development </a> </li> </ul> </div>
Примеры кода JavaScript
var $ vav = $ ('#jnav'), navtop = $ vav.offset (). top, vavh = $ vav.outerheight (), wintop_1 = 0, winwidth = $ (window) .width (), holder = jquery ('<div>'); $ (window) holder.css («Высота», NAVH); Прокрутите и отображайте if (Wintop_2> Wintop_1 && Winwidth> 980) {$ NAV.RemoveClass ('Fixed-Nav-Appear');Пример кода CSS
.nav {ширина: 980px; Margin: 0 Auto;}. Nav Li {Display: Inline Block; *дисплей: inline; *Zoom: 1; Маржа: 0 10px;}. Nav li a {display: block; Подкладка: 5px 10px;}. Fixed-nav {position: fixed; Ширина: 100%; Верх: -40px; -Вебкит-транзиция: топ .5s; -Моз-трансляция: Top .5s; -О-транзиция: топ .5s; Переход: Top .5s; -Вебкит-бокс-тень: 0 2px 2px rgba (0,0,0, .1); -Мозо-бокс-тень: 0 2px 2px rgba (0,0,0, .1); Box-Shadow: 0 2px 2px rgba (0,0,0, .1);}. Fixed-Nav-Appear {top: 0;}Выше приведен пример кода того, как использовать JS для реализации плавающей навигации, когда мыши прокручиваются. Если вы заинтересованы, пожалуйста, обратитесь к этому.