Повторение некоторых колес избирательно может быть неплохо. Блог Аарона добавил подвесное меню, которое кажется очень высоким. Хотя этот вид трюка - это не первый раз, когда я его видел, я никогда не писал его сам. Сегодня я избирательно напишу об этой функции. Ниже приведен процесс разработки этого колеса, который также может рассматриваться как процесс анализа и реализации документа требований.
Демо -адрес: http://sandbox.runjs.cn/show/to8wdmuy
Скачать исходный код: https://github.com/bjtqti/floatmenu
Первым шагом является создание структуры раздела DOM:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> AppCarrier </title>
<link rel = "styleSheet" href = "menu.css">
</head>
<тело>
<div id = "content">
<h1 id = "test1"> test1 </h1>
<p> прошлое может повредить. Но вы можете либо бежать от него, либо учиться на нем </p>
<p> Прошлое было болезненным, но вы либо убегаете, либо росли от него </p>
<p> один встречает свою судьбу на дороге, которую он берет, чтобы избежать этого </p>
<p> Часто на пути избежать судьбы, но он встречается неожиданно </p>
<p> Правила предназначены для нарушения </p>
<p> Правила должны быть нарушены. </p>
<p> Годы могут морщивать кожу, но отказаться от энтузиазма морщин души. </p>
<p> Прохождение времени только делает лицо старым, но страсть больше не делает сердце увязывать. </p>
<h1 id = "test2"> test2 </h1>
<p> Только постоянно практикуя знания, которые вы узнали, можете ли вы по -настоящему освоить их. </p>
<p> Живи каждый день в полной мере. </p>
<p> Наслаждайтесь каждый день. </p>
<p> Следите за звездами, а ноги на земле. </p>
<p> Имейте высокие амбиции и держите ноги на земле. </p>
<p> Всегда будьте в курсе неожиданного приключения. </p>
<p> Иди готовы начать неожиданное приключение в любое время. </p>
<p> Жизнь полна разочарования. Вы не можете остановиться на вещах. Вы должны двигаться дальше. </P>
<p> Жизнь часто несчастна, не баловайтесь в прошлом и смело двигаться вперед. </p>
<p> Я свободный дух. Я не могу быть в клетке. </P>
<p> Моя душа свободна и не должна быть связана. </p>
<p> Иногда сердце видит, что невидимо для глаз. </p>
<p> Те, кто вне поля зрения, могут почувствовать это </p>
<p> Простые вещи также являются самыми необычными вещами, и только мудрый может их видеть. </p>
<p> Самая обычная вещь - это также самая необычная вещь, и только мудрые понимают это. </p>
<h1 id = "test3"> test3 </h1>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<h1 id = "test4"> test4 </h1>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
<p> Сколько XXXXXX </p>
</div>
<div id = "menubar">
<p> скрыть </p>
<ul>
<li> <a href = "#test1"> test1 </a> </li>
<li> <a href = "#test2"> test2 </a> </li>
<li> <a href = "#test3"> test3 </a> </li>
<li> <a href = "#test4"> test4 </a> </li>
</ul>
</div>
</body>
<script src = "menu.js"> </script>
</html>
Второй шаг - подготовить файл CSS:
Кода -копия выглядит следующим образом:
уль {
тип списка: нет;
}
a {
Текстовое декорация: нет;
}
/*Область содержания статьи*/
#содержание {
Ширина: 400px;
Поле: 0 Авто;
размер шрифта: 2EM;
}
/*Плавающее меню*/
.menu {
позиция: исправлена;
Верх: 20%;
Справа: 0;
Ширина: 200px;
Граница: 1px сплошной серый;
граница радий: 5px;
}
.menu li {
высота: 2ем;
высота линии: 2EM;
}
.красный {
Цвет: красный;
}
.скрывать {
дисплей: нет;
}
/*Скрыть плавающее меню*/
.slidein {
преобразование: translate3d (202px, 0, 0);
продолжительность перехода: .5s;
}
/*Показать плавающее меню*/
.slideout {
Преобразование: Translate3d (0, 0, 0);
продолжительность перехода: .5s;
}
.static {
Цвет:#007aff;
Текст-альбом: Центр;
}
/*Показать плавающий мяч*/
.toshow {
дисплей: блок;
Ширина: 4,8 эм;
высота: 2ем;
высота линии: 2EM;
граница радиус: .5em;
Граница: 1px сплошной серый;
преобразование: translate3d (-5em, 0, 0);
Продолжительность перехода: 1 с;
}
Третий шаг начинает писать код JS:
Кода -копия выглядит следующим образом:
(function (doc) {
// Собирайте местоположения ссылок для каждой главы
var pos = [],
// Сбор предметов в меню
ссылки = doc.getelementsbytagname ('a'),
// Соберите название главы
названия = doc.getElementsbytagname ('h1'),
// висящее меню
Menu = doc.getElementById ('menubar'),
// текущий выбор
currentItem = null;
// Добавить красный стиль
var addClass = function (element) {
currentItem && currentitem.removeatTribute ('class');
element.setattribute ('class', 'red');
currentItem = element;
},
// веб -страница развернута высоко:
getscrolltop = function () {
return math.ceil (document.body.scrolltop) +1;
},
// Рассчитать положение прокрутки
StartsCroll = function () {
var scrolltop = getscrolltop (),
len = titles.length,
i = 0;
// Статья 1
if (scrolltop> = 0 && scrolltop <pos [0]) {
addClass (ссылки [0]);
возвращаться;
}
// последний
if (scrolltop> = pos [len-1]) {
addClass (ссылки [LEN-1]);
возвращаться;
}
//середина
for (; i <len; i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i+1]) {
addClass (ссылки [i]);
перерыв;
}
}
};
// Нажмите на ссылку в списке, чтобы изменить цвет
menu.onclick = function (e) {
var target = e.target || E.srcelement;
if (target.nodename.tolowercase () === 'a') {
// Список индикации статуса элемента
addClass (Target);
возвращаться;
}
if (target.nodename.tolowercase () === 'p') {
if (target.classname == 'static') {
// скрыть меню
this.classname = 'menu slidein';
settimeout (function () {
target.classname = 'static toshow';
target.innerhtml = 'show';
}, 1000);
}еще{
// Показать меню
target.classname = 'static';
target.innerhtml = 'Hide';
this.classname = 'menu slideout';
}
}
}
// Рассчитайте начальную позицию каждой главы
var ln = titles.length;
while (-ln> -1) {
//titles!
pos.unshift (названия [ln] .offsettop);
}
StartsCroll ();
// Свитка
window.onscroll = function () {
StartsCroll ()
}
})(документ);
проанализировать:
1. Реализуйте автоматический прыжок в указанный раздел
Этот шаг можно сделать, используя якорную функцию тега <a>. Поскольку HTML5 не поддерживает атрибут имени в будущем (HTML5 не поддерживает его. Укажите имя якоря.), Рассмотрите возможность использования идентификатора для прыжков.
2. Определите, какая глава в содержании слева принадлежит элементу в плавающем меню.
Этот шаг - сложный момент, давайте кратко проанализируем это:
2.1 Первый случай - нажать на пункт меню вручную. Это просто, просто идентифицируйте элемент щелчка.
2.2 Во втором случае прокрутите или перетащите полос прокрутки через среднюю кнопку мыши. В настоящее время вам нужно связать контент слева и пункты меню справа. Это самая сложная часть. Рассмотрим стратегию реализации шаг за шагом, начиная с легкой, а затем трудной, и каждый пробивается.
2.2.1 Сначала Соберите высоту координаты элемента заголовка. Это вертикальная высота всех метров H1. Сохранить массив 1.
2.2.2 Соберите элемент A в пункте меню и храните его в массиве 2.
2.2.3 Слушайте событие прокрутки и определите, к какому пункту меню принадлежит текущий контент.
При выполнении одного шага рекомендуется нарисовать изображение на бумаге рукописи:
А1
************************
* A2
*
************************
* A3
*
************************
*
* A4
*
Каждый раз, когда вы прокрутите, вы определяете, какой диапазон текущего расстояния прокрутки. Если это от 0 до A1, то это глава 1, от A1 до A2, это глава 2 и так далее.
Что касается высоты позиции элемента, я просто использую element.offsettop, чтобы получить его здесь. Могут быть проблемы совместимости. Если вы используете jQuery, это должно быть $ ('element'). Offset (). Top,
Точно так же я просто использовал document.body.scrolltop, чтобы получить высоту прокрутки. Если он заменяется jQuery, это должно быть $ (окно) .scrolltop ();
Цель рисования состоит в том, чтобы конкретизировать абстрактные проблемы, помочь нам подумать и выяснить правила. Может быть, это будет выглядеть выше, называя его «моделирование».
Следует подчеркнуть, что отношения в массиве 1 и массива 2 должны соответствовать одному. Например, соответствующий <a href = "#h1"> IS <h1 id = "h1">.
2.3 В третьем случае индикатор состояния меню, когда вы напрямую вводите страницу. Например, если вы вводите через адрес, как index.html#H3, H3 в меню следует выделить.
3. Реализуйте дисплей и скрыть анимацию плавающего меню.
3.1 Этот шаг должен быть относительно простым, вы можете сначала рассмотреть возможность сделать это. Просто используйте свойство трамваев CSS3. Это просто и эффективно. Если вы кросс-браузер, пожалуйста, будьте совместимы.
Обратите внимание, что преобразование: translate3d (ось X, ось Y, ось Z); Использование 3D может использовать аппаратное ускорение для увеличения эффектов анимации, но энергоснабжение увеличится, поэтому используйте его! Первый параметр - контроль левого и правого направления. Если это положительно, это означает двигаться вправо, и если это отрицательно, это означает двигаться влево. Это на самом деле не строго. Фактически, это должно быть определено на основе эталонной точки. Например, когда x координата элемента составляет 0, значение x увеличивается вправо и уменьшается влево, а 0 - сброшен.
После анализа код написан. Об этом нечего сказать. Наслаждайтесь музыкальным чувством, генерируемым путем ввода клавиатуры.
После написания, предварительно просмотрите его, нажмите на меню, перейдите в указанную главу и нажмите на элемент, чтобы покраснеть, обновить текущую страницу, а отображение зависимости верно. Сдвиньте колесо прокрутки, и элементы меню меняются соответственно с изменениями в содержании. Перетащите полосу прокрутки. То же самое верно. Наконец, нажмите, чтобы скрыть, отозвать меню, нажмите, чтобы показать, и меню выдвигается. Это завершит функцию подвески.
Выше приведено в этой статье, надеюсь, вам понравится.