Файл исходного кода:
Scrollspy.js
Реализовать функции
1. Когда установленная в области прокрутки в области прокрутки достигает действительной позиции, указанный элемент на его навигации устанавливается в ассоциации.
2. Навигация должна быть .nav> li> структура, и общеугольный
3. Должен быть стиль. Нав в меню
4. Грангета данных в области прокрутки должна соответствовать идентификатору родительского идентификатора навигации (должен быть родитель)
<div id="selector"> <ul> <li><a href="#one">one</a> </li> <li><a href="#two">two</a> </li> <li><a href="#three">three</a> </li> </ul></div><div data-spy="scroll" data-target="#selector" style="height:100px; переполнение: скрыто; переполнение y: auto; » > <H4 id = "One"> ibe </h4> <p> Один конкретный контент <br/> Один конкретный контент <br/> Один конкретный контент <br/> Один конкретный контент <br/> </p> <h4 id = "Два"> два </h4> <p> Один конкретный контент <br/> Один конкретный контент <br/> </p> <h4 id = "Три"> три </H4> One Content <br/> One Content <br/> One Content <br /> </p> one </p> One Content <br /> </p> One Content <br /> </p> <H4 йд = Содержание <br/> </p> <h4 id = "three"> three </h4> <p> один конкретный контент <br/> один конкретный контент <br/> </p> <h4 id = "three"> три </h4> <p> Один конкретный контент <br/> Один конкретный контент <br/> Один конкретный контент <br/> </p>.
Анализ исходного кода:
1.
2. Если область прокрутки является корпусом, элемент зоны прокрутки будет отмечен как окно (оценивается в конструкторе)
это. $ scolollement = $ (element) .is (document.body)? $ (окно): $ (элемент)
3. GetScrolHeight: Получите высоту контента контейнера для прокрутки (включая скрытую часть)
это. $ scrollelement [0] .scrollheight || Math.max (this. $ Body [0] .scrollheight, document.documentelement.scrollheight)
4. Обновление: обновить и хранить значения каждого хэширования в контейнере Scrold
4.1. Используйте смещение, чтобы получить значение позиционирования по умолчанию. Если область прокрутки не является окном, используйте положение, чтобы получить ее.
if (! $. Iswindow (this. $ scrollelement [0])) {offsetmethod = 'position' offsetbase = this. $ scrollement.scrolltop () //4.2. Согласно обширке на навигации, пройдке и получении значения смещения, соответствующего хешированию в области прокрутки:
это. $ href.length && $ href.is (': visible') && [[$ href [offsetmethod] (). that.targets.push (this [1])})5. Процесс: Функция триггера события прокрутки используется для расчета, какое меню навигации необходимо выделить в настоящее время
5.1. Получите расстояние прокрутки контейнера прокрутки:
var scrolltop = this. $ scrollelement.scrolltop () + this.options.offset
5.2. Максимальная высота, которую может катиться контейнер для катания
// Максимальная высота прокрутки = расстояние настройки прокрутки (смещение) + Высота содержимого контейнера прокрутки - высота контейнера прокрутки высоты var maxscroll = this.options.offset + scrollheight - this. $ Scolllement.height ()
5.3. Установить логику прокрутки элементов:
for (i = offsets.length; i--;) {// Перенос All Offset ActivetArget! = Targets [i] // судить о том, равна ли текущая цель ActiveTarget && scrolltop> = смещения [i] // Высота прокрутки> смещение && (i + 1] === undefined || Элемент i+1 не больше высоты прокрутки && this.6. Active: установите указанное меню навигации, чтобы выделить
7. Clear: Clear все выделенные меню
Приведенная выше статья кратко обсуждает анализ исходного кода Bootstrap Scrollspy (прослушивание прослушивания) - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.