Latest web development tutorials
×

Bootstrap курс

Bootstrap курс Bootstrap Краткое введение Bootstrap Установка по окружающей среде

Bootstrap CSS

Bootstrap CSS обзор Bootstrap Grid System Bootstrap наборный Bootstrap код Bootstrap таблица Bootstrap форма Bootstrap кнопка Bootstrap изображение Bootstrap Вспомогательный класс Bootstrap Отзывчивый Утилиты

Bootstrap Компоненты макета

Bootstrap значок шрифты Bootstrap Выпадающее меню Bootstrap Группа кнопок Bootstrap Кнопка в раскрывающемся меню Bootstrap группа Поле ввода Bootstrap элементы навигации Bootstrap Панель навигации Bootstrap панировочные сухари Bootstrap пейджинг Bootstrap этикетка Bootstrap знак Bootstrap Большой экран Bootstrap Название страницы Bootstrap Миниатюры Bootstrap предупреждение Bootstrap Шкала прогресса Bootstrap Мультимедийные Bootstrap Список групп Bootstrap панель Bootstrap Wells

Bootstrap Виджет

Bootstrap Plug-Glance Bootstrap эффект перехода Bootstrap режимное окно Bootstrap Выпадающее меню Bootstrap Свиток монитор Bootstrap таб Bootstrap подсказки Bootstrap Всплывающее окно Bootstrap Предупреждение коробки Bootstrap кнопка Bootstrap сгиб Bootstrap карусель Bootstrap Дополнительная навигация

Bootstrap другое

Bootstrap UI редактор Bootstrap V2 курс Bootstrap HTML стандарты кодирования Bootstrap CSS стандарты кодирования

Bootstrap Дополнительная навигация (аффикс) виджета

Дополнительная навигация (Аффикс) плагин позволяет <DIV> фиксируется в определенном положении на странице. Можно также включить или выключить с помощью переключателя между плагином. Типичным примером является социальный значок. Они начнут в определенном положении, но когда страница нажмите на тег, то <DIV> будет заблокирован в положении, а не с остальной частью страницы прокрутки.

Если вы хотите обратиться к отдельным подключаемых функций, вам нужно ссылаться наaffix.js.Или, как Bootstrap плагин Обзор упоминается в главе, вы можете обратиться кbootstrap.jsили сжатой версииbootstrap.min.js.

использование

Вы можете приписать данные, либо для навигации (аффикс) плагинов с помощью дополнительного JavaScript.

  • Спомощью атрибутов данных: Чтобы добавить дополнительный элемент к навигации (аффикс) поведения, только нужно добавить элемент , который вы хотите контролировать данные-шпиона = "проставлять"может быть. С помощью Offset для определения фиксирующего элемента и, когда переключаться с мобильного.

    примеров

    Следующий пример демонстрирует использование дополнительной навигации (Аффикс) виджета по данным атрибут использования:

    примеров

    <! DOCTYPE HTML> <HTML> <Head> <Meta кодировка = "UTF-8"> <Title> Bootstrap дополнительную навигацию (Аффикс) виджет </ title> <Ссылка отн = "таблица стилей" HREF = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <Script SRC = "http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"> </ скрипт> <Script SRC = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </ скрипт> <Style>
    / * Стили * / ул .nav-табс { ширина: 140 точек ; Верхнее поле: 20 точек ; Border-радиус: 4 точек ; Border: 1 точек твердый #ddd ; Box-тень: 0 1 точек 4 точек RGBA (0, 0, 0, 0.067) ;} UL .nav-вкладки Li { Запас: 0 ; Border-топ: 1 точек твердый #ddd ;} UL .nav-вкладки Ли: первый ребенок { границы сверху: никто ;} UL .nav-вкладки Li а { Запас: 0 ; Обивка: 8 точек 16 точек ; Border-радиус: 0 ;} UL .nav-вкладки Ли .active а, ул .nav-табс Ли .active а: зависать { цвет: #fff ; Справочная информация : # 0088cc ; Border: 1 точек твердый # 0088cc ;} UL .nav-вкладки Ли: первый ребенок а { граница радиуса: 4 точек 4 точек 0 0 ;} UL .nav-вкладки Ли: последний ребенок а { граница радиуса: 0 0 4 точек 4 точек ;} UL .nav-вкладки .affix { верх: 30 точек / * Установить верхнее положение возлагали элемента * / }
    </ Style> </ Head> <Кузов Данные-шпиона = "прокручивать" данных целевых = "#myScrollspy"> <Div класс = "контейнер"> <Div класс = "JumboTron"> <H1> Bootstrap Аффикс </ h1 > </ Div> <Div класс = "строка"> <Div класс = "Col-хз-3 " ID = "myScrollspy"> <Ul класс = "нав нав-язычки нав -stacked" Данные-шпиона = "проставлять" данных компенсировано-топ = "125 "> <Li класс = "активный"> <а HREF = "# раздел-1" > первая часть </ а> </ li> <Li> HREF = "# раздел-2" > Вторая часть </ а> </ li> <Li> HREF = "# раздел-3" > Часть III </ A> </ li> <Li> HREF = "# раздел-4" > Часть IV </ а> </ li> <Li> HREF = "# раздел-5" > Часть V </ а> </ li> </ UL> </ Div> <Div класс = "Col-хз-9 "> <H2 ID = "секция-1"> первая часть </ h2> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipiscing Элит. Нам ес СЭМ TEMPOR, Varius Квам на, luctus дуй. Mauris магна Метус, dapibus включенные в другие группировки turpis Новичок, Semper malesuada анте. Преддверия ID Метус AC nisl Bibendum scelerisque не не Purus. Suspendisse Varius nibh не aliquet sagittis. в tincidunt Орчи сидят Амет Elementum преддверия. Vivamus fermentum в arcu в aliquam. Quisque aliquam PortA Одио в Fringilla. Vivamus nisl Льве, blandit в Bibendum ес, tristique Eget Risus. Integer aliquet Quam ут Элит suscipit, ID interdum neque porttitor. Integer faucibus язычок. < / p> <P> преддверия Quis Квам ут магна consequat faucibus. Pellentesque Eget НИСИ Ми suscipit tincidunt. Ut Tempus изречение Risus. Pellentesque viverra sagittis Квам на Маттис. Suspendisse Potenti. Aliquam сидеть Амет gravida nibh, facilisis gravida Одио. Phasellus auctor велит в Lacus blandit , Commodo iaculis Justo viverra. Etiam Vitae Est arcu. Mauris Vel congue Dolor. aliquam Eget ми ми. Fusce Квам tortor, Commodo ас дуй Quis, Bibendum viverra Erat. Меценат Маттис Lectus enim, Quis tincidunt дуй molestie euismod. Curabitur и др диам tristique, accumsan Nunc ес, hendrerit Tellus. < / p> <Hr> <H2 ID = "секция-2"> Второй раздел </ h2> <P> Nullam hendrerit Justo не Leo aliquet imperdiet. Etiam в sagittis Lectus. Suspendisse ultrices placerat accumsan. Mauris Quis dapibus Орси. В dapibus велит blandit pharetra tincidunt. Quisque не Sapien включенные в другие группировки Lacus condimentum facilisis ут iaculis enim. Sed viverra interdum Bibendum. Донец AC sollicitudin Dolor. Fringilla СЭД Vitae Lacus на rutrum. Phasellus congue преддверия язычок СЭД consequat. </ p> <P> преддверия consectetur scelerisque Lacus, AC fermentum Lorem convallis SED. Nam Одио tortor, изречение Quis malesuada на, pellentesque Vitae Орчи. Vivamus Elementum, Felis ес auctor lobortis, диам велит экскретов Lacus, Quis fermentum Метус анте Quis Урна. Sed в facilisis либеро. Сперма sociis natoque penatibus и др Magnis дис роженица Монтес, nascetur ridiculus мус. преддверия Bibendum blandit Dolor. Nunc Орси Dolor, molestie включенные в другие группировки nibh в, hendrerit tincidunt анте. Vivamus СЭМ augue, hendrerit не Sapien в, тоШз ornare augue. </ р > <Hr> <H2 ID = "секция-3"> Часть III </ h2> <P> Integer pulvinar Лев ID пзиз pellentesque преддверия. Sed диам либеро, sodales Eget Sapien Vel, porttitor Bibendum enim. Донец СЭД nibh Vitae Lorem porttitor blandit НЭК анте. Pellentesque Vitae Метус Ipsum. Phasellus СЭД Nunc ас сем malesuada condimentum. Etiam в aliquam Lectus. Нам Vel Sapien диам. Донец pharetra ID arcu Eget blandit. Proin imperdiet Маттис augue в porttitor. Quisque Tempus enim ID lobortis feugiat. Suspendisse tincidunt пзиз Quis Dolor Fringilla blandit. Ut СЭД Sapien на Purus Лациния porttitor. Nullam iaculis, Felis Pretium ornare, Dolor nisl зетрег tortor, Vel sagittis Lacus Est consequat эрос. Sed ID Pretium nisl. Curabitur Dolor nisl, laoreet Vitae aliquam ID, tincidunt сидеть Амет mauris. </ p> <P> Phasellus Vitae suscipit Justo. Mauris pharetra feugiat анте ID лациния. Etiam faucibus mauris ID TEMPOR экскретов. DUIs luctus turpis на accumsan tincidunt. Phasellus пзиз пзиз, volutpat Vel Tellus ас, tincidunt Fringilla Massa. Etiam hendrerit Dolor Eget анте rutrum adipiscing. Крас interdum Ipsum Маттис, Tempus mauris Vel , зетрег Ipsum. DUIs СЭД Dolor ут enim lobortis pellentesque ultricies ас язычок. pellentesque convallis Элит НИСИ, ID vulputate Ipsum ullamcorper ут. Крас ас pulvinar Пурус, AC viverra оц. Suspendisse Potenti. Integer pellentesque neque и др Elementum Tempus. Curabitur Bibendum в ут язычок rhoncus. </ p> <P> Quisque pharetra велит ID велит iaculis Pretium. Nullam с Justo СЭД Ligula Порта Semper ес Quis enim. Pellentesque pellentesque, Метус в facilisis hendrerit, Lectus велит facilisis Льве, Quis volutpat turpis arcu Quis enim. Nulla viverra Lorem Elementum interdum ultricies. Suspendisse accumsan Квам включенные в другие группировки анте тоШз Tempus. Morbi Vel accumsan диам, Eget convallis Tellus. Suspendisse Potenti. </ p> <Hr> <H2 ID = "секция-4"> Часть IV </ h2> <P> Suspendisse Орси facilisis, dignissim tortor Vitae, ultrices миль. Преддверия iaculis Lacus. Phasellus Vitae convallis язычок, включенные в другие группировки volutpat Tellus. Vivamus scelerisque тоШз nisl, включенные в другие группировки vehicula Элит экскретов а. Sed luctus Метус ID ми gravida, faucibus convallis neque Pretium. Меценат Quis Sapien ут Лев Fringilla TEMPOR Vitae сидят Амет Лео. Донец imperdiet Tempus placerat. Pellentesque pulvinar ultrices Nunc СЕПГ ultrices. Morbi Vel миль Pretium, fermentum Lacus и др, viverra Tellus. Phasellus sodales либеро включенные в другие группировки ДЩ convallis, сидеть Амет fermentum Sapien auctor . преддверия анте Ipsum primis в faucibus Орси luctus др ultrices Дознание cubilia Curae ;. Сед ес Elementum nibh, Quis Varius либеро </ p> <P> преддверия Quis Квам ут магна consequat faucibus. Pellentesque Eget НИСИ Ми suscipit tincidunt. Ut Tempus изречение Risus. Pellentesque viverra sagittis Квам на Маттис. Suspendisse Potenti. Aliquam сидеть Амет gravida nibh, facilisis gravida Одио. Phasellus auctor велит в Lacus blandit , Commodo iaculis Justo viverra. Etiam Vitae Est arcu. Mauris Vel congue Dolor. aliquam Eget ми ми. Fusce Квам tortor, Commodo ас дуй Quis, Bibendum viverra Erat. Меценат Маттис Lectus enim, Quis tincidunt дуй molestie euismod. Curabitur и др диам tristique, accumsan Nunc ес, hendrerit Tellus. < / p> <P> Phasellus fermentum, neque сидеть Амет sodales Tempor, enim анте interdum эрос, Eget luctus Ipsum эрос ут язычок. Nunc ornare Erat Quis faucibus molestie. Proin malesuada consequat Commodo. Mauris iaculis, эрос ут dapibus luctus, Massa enim Elementum Пурус, сидеть Амет tristique Purus Purus включенные в другие группировки Felis. Morbi преддверия Sapien Eget Порта pulvinar. Нам на Quam диам. Proin rhoncus, Felis Elementum accumsan изречение, Felis НИСИ преддверия Tellus, и др ultrices пзиз Felis в Орси. Quisque преддверия СЭМ nisl, Vel congue Leo изречение включенные в другие группировки. Крас Eget Эст на велит sagittis ullamcorper Vel и др Lectus. В HAC habitasse Platea dictumst. Etiam interdum iaculis велит, Vel sollicitudin Lorem feugiat сидят Амет. Etiam luctus, Квам СЕПГ sodales aliquam, Lorem либеро hendrerit Урна, faucibus rhoncus Massa nibh в Felis. Curabitur AC Tempus Nulla, ут зетрег Erat. Vivamus ullamcorper СЭМ Порта, ornare экскретов mauris facilisis ID. </ p> <P> Ut ут пзиз nisl. Fusce porttitor эрос в MAGNA luctus, не congue Nulla eleifend. Aenean porttitor feugiat Dolor сидеть Амет facilisis. Pellentesque venenatis MAGNA Et Risus Commodo, а Commodo turpis gravida. Нам тоШз Massa dapibus Урна aliquet, Quis iaculis Элит sodales. Sed Eget ornare Орси, ес malesuada Justo. Nunc Lacus augue, изречение Quis дуй ID, лациния congue Квам. Nulla СЭМ СЭМ, aliquam включенные в другие группировки Dolor ас, Tempus convallis пипс. interdum и др malesuada FAMEs AC анте Ipsum primis в faucibus. Nulla suscipit convallis iaculis. Quisque Eget Commodo язычок. Связаться с Нами Лев дуй, facilisis Quis eleifend в, aliquet Vitae пипс. Suspendisse fermentum Одио AC Massa ultricies pellentesque. Fusce ес suscipit Massa. </ p> <Hr> <H2 ID = "секция-5"> Часть V </ h2> <P> Нам Eget Purus включенные в другие категории Est consectetur vehicula. Nullam ultrices nisl Risus, в viverra либеро экскретов сидеть Амет. Etiam porttitor Dolor не эрос pulvinar malesuada. Преддверия сидеть Амет Est тоШз Nulla Tempus aliquet. Связаться с Нами luctus hendrerit arcu , не laoreet. Morbi consequat placerat Магна, AC ornare Одио sagittis SED. Донец Vitae ullamcorper Purus. Vivamus не Метус ас Justo volutpat Порта. </ p> <P> Vivamus Маттис accumsan Erat, Vel convallis пзиз Pretium включенные в другие группировки. Integer Nunc Nulla, viverra ут СЭМ не, scelerisque vehicula arcu. Fusce Bibendum convallis augue сидеть Амет lobortis. Крас Порта Урна turpis, sodales lobortis Purus adipiscing идентификатор. Меценат ullamcorper, turpis suscipit pellentesque Fringilla, Massa Lacus pulvinar ми , включенными в другие группировки dignissim велит arcu Eget Purus. Нам на dapibus Tellus, Eget euismod nisl. Ut Eget venenatis Sapien. Vivamus vulputate Varius mauris, Vel Varius nisl facilisis ас. Nulla aliquet Justo nibh ornare, ес congue neque rutrum. </ p> <P> Suspendisse Орси facilisis, dignissim tortor Vitae, ultrices миль. Преддверия iaculis Lacus. Phasellus Vitae convallis язычок, включенные в другие группировки volutpat Tellus. Vivamus scelerisque тоШз nisl, включенные в другие группировки vehicula Элит экскретов а. Sed luctus Метус ID ми gravida, faucibus convallis neque Pretium. Меценат Quis Sapien ут Лев Fringilla TEMPOR Vitae сидят Амет Лео. Донец imperdiet Tempus placerat. Pellentesque pulvinar ultrices Nunc СЕПГ ultrices. Morbi Vel миль Pretium, fermentum Lacus и др, viverra Tellus. Phasellus sodales либеро включенные в другие группировки ДЩ convallis, сидеть Амет fermentum Sapien auctor . преддверия анте Ipsum primis в faucibus Орси luctus др ultrices Дознание cubilia Curae ;. Сед ес Elementum nibh, Quis Varius либеро </ p> <P> Morbi СЭД fermentum Ipsum. Morbi Орси vulputate tortor ornare blandit Quis Орси. Донец aliquam sodales gravida. УТ ullamcorper НИСИ, ас Pretium велит. Преддверия Vitae Lectus volutpat, consequat Lorem сидят Амет, pulvinar Tellus. В tincidunt Vel Льве Eget pulvinar. Curabitur в эрос нон Lacus malesuada aliquam. Связаться с Нами и др Tempus Одио. целое а Квам пипс. В HAC habitasse Platea dictumst. aliquam Porta nibh Nulla, и др Маттис turpis placerat Eget. Pellentesque дуй диам, pellentesque Vel gravida ID, accumsan ес Магна . Сед зетрег arcu, ут dignissim Лео. </ p> <P> Сед Vitae lobortis диам, ID molestie Магна. Aliquam consequat Ipsum Quis Est изречение ultrices. Aenean nibh велит, Fringilla в диам ID, blandit hendrerit Lacus. Донец vehicula rutrum Tellus Eget fermentum. Pellentesque AC Erat др arcu ornare tincidunt. Aliquam Erat volutpat. Vivamus lobortis Урна Quis gravida зетрег . В condimentum, ЭСТ faucibus luctus, ми Dolor Cursus ми, ID vehicula arcu пзиз nibh. Pellentesque blandit Sapien Lacus, Vel vehicula Nunc feugiat сидят Амет. </ p> </ Div> </ Div> </ Div> </ Body> </ HTML>

    Попробуйте »

    Результаты следующие:

    Дополнительная навигация (Аффикс) подключи Свойства данных
  • По JavaScript: Вы можете добавить элемент JavaScript вручную добавить навигацию (Аффикс), следующим образом :
    $ ( '# MyAffix'). Аффикс ({
       смещение: {
    	  верх: 100, низ: функция () {
    		 Возвращение (this.bottom = 
    			$ ( '. Bs-сноска'). OuterHeight (правда))
    		 }
    	  }
    })
    

    примеров

    Следующий пример демонстрирует использование дополнительной навигации (Аффикс) виджета с помощью использования JavaScript:

    примеров

    <! DOCTYPE HTML> <HTML> <Head> <Meta кодировка = "UTF-8"> <Title> Bootstrap дополнительную навигацию (Аффикс) виджет </ title> <Ссылка отн = "таблица стилей" HREF = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <Script SRC = "http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"> </ скрипт> <Script SRC = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </ скрипт> <Style>
    / * Стили * / ул .nav-табс { ширина: 140 точек ; Верхнее поле: 20 точек ; Border-радиус: 4 точек ; Border: 1 точек твердый #ddd ; Box-тень: 0 1 точек 4 точек RGBA (0, 0, 0, 0.067) ;} UL .nav-вкладки Li { Запас: 0 ; Border-топ: 1 точек твердый #ddd ;} UL .nav-вкладки Ли: первый ребенок { границы сверху: никто ;} UL .nav-вкладки Li а { Запас: 0 ; Обивка: 8 точек 16 точек ; Border-радиус: 0 ;} UL .nav-вкладки Ли .active а, ул .nav-табс Ли .active а: зависать { цвет: #fff ; Справочная информация : # 0088cc ; Border: 1 точек твердый # 0088cc ;} UL .nav-вкладки Ли: первый ребенок а { граница радиуса: 4 точек 4 точек 0 0 ;} UL .nav-вкладки Ли: последний ребенок а { граница радиуса: 0 0 4 точек 4 точек ;} UL .nav-вкладки .affix { верх: 30 точек / * Установить верхнее положение возлагали элемента * / }
    </ Style> <Script>
    $ (Документ). Готов (функция () {$ ( "#myNav"). Аффикс ({ смещение: { верх: 125 } });});
    </ Script> </ Head> <Кузов Данные-шпиона = "прокручивать" данных целевых = "#myScrollspy"> <Div класс = "контейнер"> <Div класс = "JumboTron"> <H1> Bootstrap Аффикс </ h1 > </ Div> <Div класс = "строка"> <Div класс = "Col-хз-3 " ID = "myScrollspy"> <Ul класс = "нав нав-язычки нав -stacked" ID = "myNav"> <Li класс = "активный"> <а HREF = "# раздел-1" > первая часть </ а> </ li> <Li> HREF = "# раздел-2" > Вторая часть </ а> </ li> <Li> HREF = "# раздел-3" > Часть III </ A> </ li> <Li> HREF = "# раздел-4" > Часть IV </ а> </ li> <Li> HREF = "# раздел-5" > Часть V </ а> </ li> </ UL> </ Div> <Div класс = "Col-хз-9 "> <H2 ID = "секция-1"> первая часть </ h2> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipiscing Элит. Нам ес СЭМ TEMPOR, Varius Квам на, luctus дуй. Mauris магна Метус, dapibus включенные в другие группировки turpis Новичок, Semper malesuada анте. Преддверия ID Метус AC nisl Bibendum scelerisque не не Purus. Suspendisse Varius nibh не aliquet sagittis. в tincidunt Орчи сидят Амет Elementum преддверия. Vivamus fermentum в arcu в aliquam. Quisque aliquam PortA Одио в Fringilla. Vivamus nisl Льве, blandit в Bibendum ес, tristique Eget Risus. Integer aliquet Quam ут Элит suscipit, ID interdum neque porttitor. Integer faucibus язычок. < / p> <P> преддверия Quis Квам ут магна consequat faucibus. Pellentesque Eget НИСИ Ми suscipit tincidunt. Ut Tempus изречение Risus. Pellentesque viverra sagittis Квам на Маттис. Suspendisse Potenti. Aliquam сидеть Амет gravida nibh, facilisis gravida Одио. Phasellus auctor велит в Lacus blandit , Commodo iaculis Justo viverra. Etiam Vitae Est arcu. Mauris Vel congue Dolor. aliquam Eget ми ми. Fusce Квам tortor, Commodo ас дуй Quis, Bibendum viverra Erat. Меценат Маттис Lectus enim, Quis tincidunt дуй molestie euismod. Curabitur и др диам tristique, accumsan Nunc ес, hendrerit Tellus. < / p> <Hr> <H2 ID = "секция-2"> Второй раздел </ h2> <P> Nullam hendrerit Justo не Leo aliquet imperdiet. Etiam в sagittis Lectus. Suspendisse ultrices placerat accumsan. Mauris Quis dapibus Орси. В dapibus велит blandit pharetra tincidunt. Quisque не Sapien включенные в другие группировки Lacus condimentum facilisis ут iaculis enim. Sed viverra interdum Bibendum. Донец AC sollicitudin Dolor. Fringilla СЭД Vitae Lacus на rutrum. Phasellus congue преддверия язычок СЭД consequat. </ p> <P> преддверия consectetur scelerisque Lacus, AC fermentum Lorem convallis SED. Nam Одио tortor, изречение Quis malesuada на, pellentesque Vitae Орчи. Vivamus Elementum, Felis ес auctor lobortis, диам велит экскретов Lacus, Quis fermentum Метус анте Quis Урна. Sed в facilisis либеро. Сперма sociis natoque penatibus и др Magnis дис роженица Монтес, nascetur ridiculus мус. преддверия Bibendum blandit Dolor. Nunc Орси Dolor, molestie включенные в другие группировки nibh в, hendrerit tincidunt анте. Vivamus СЭМ augue, hendrerit не Sapien в, тоШз ornare augue. </ р > <Hr> <H2 ID = "секция-3"> Часть III </ h2> <P> Integer pulvinar Лев ID пзиз pellentesque преддверия. Sed диам либеро, sodales Eget Sapien Vel, porttitor Bibendum enim. Донец СЭД nibh Vitae Lorem porttitor blandit НЭК анте. Pellentesque Vitae Метус Ipsum. Phasellus СЭД Nunc ас сем malesuada condimentum. Etiam в aliquam Lectus. Нам Vel Sapien диам. Донец pharetra ID arcu Eget blandit. Proin imperdiet Маттис augue в porttitor. Quisque Tempus enim ID lobortis feugiat. Suspendisse tincidunt пзиз Quis Dolor Fringilla blandit. Ut СЭД Sapien на Purus Лациния porttitor. Nullam iaculis, Felis Pretium ornare, Dolor nisl зетрег tortor, Vel sagittis Lacus Est consequat эрос. Sed ID Pretium nisl. Curabitur Dolor nisl, laoreet Vitae aliquam ID, tincidunt сидеть Амет mauris. </ p> <P> Phasellus Vitae suscipit Justo. Mauris pharetra feugiat анте ID лациния. Etiam faucibus mauris ID TEMPOR экскретов. DUIs luctus turpis на accumsan tincidunt. Phasellus пзиз пзиз, volutpat Vel Tellus ас, tincidunt Fringilla Massa. Etiam hendrerit Dolor Eget анте rutrum adipiscing. Крас interdum Ipsum Маттис, Tempus mauris Vel , зетрег Ipsum. DUIs СЭД Dolor ут enim lobortis pellentesque ultricies ас язычок. pellentesque convallis Элит НИСИ, ID vulputate Ipsum ullamcorper ут. Крас ас pulvinar Пурус, AC viverra оц. Suspendisse Potenti. Integer pellentesque neque и др Elementum Tempus. Curabitur Bibendum в ут язычок rhoncus. </ p> <P> Quisque pharetra велит ID велит iaculis Pretium. Nullam с Justo СЭД Ligula Порта Semper ес Quis enim. Pellentesque pellentesque, Метус в facilisis hendrerit, Lectus велит facilisis Льве, Quis volutpat turpis arcu Quis enim. Nulla viverra Lorem Elementum interdum ultricies. Suspendisse accumsan Квам включенные в другие группировки анте тоШз Tempus. Morbi Vel accumsan диам, Eget convallis Tellus. Suspendisse Potenti. </ p> <Hr> <H2 ID = "секция-4"> Часть IV </ h2> <P> Suspendisse Орси facilisis, dignissim tortor Vitae, ultrices миль. Преддверия iaculis Lacus. Phasellus Vitae convallis язычок, включенные в другие группировки volutpat Tellus. Vivamus scelerisque тоШз nisl, включенные в другие группировки vehicula Элит экскретов а. Sed luctus Метус ID ми gravida, faucibus convallis neque Pretium. Меценат Quis Sapien ут Лев Fringilla TEMPOR Vitae сидят Амет Лео. Донец imperdiet Tempus placerat. Pellentesque pulvinar ultrices Nunc СЕПГ ultrices. Morbi Vel миль Pretium, fermentum Lacus и др, viverra Tellus. Phasellus sodales либеро включенные в другие группировки ДЩ convallis, сидеть Амет fermentum Sapien auctor . преддверия анте Ipsum primis в faucibus Орси luctus др ultrices Дознание cubilia Curae ;. Сед ес Elementum nibh, Quis Varius либеро </ p> <P> преддверия Quis Квам ут магна consequat faucibus. Pellentesque Eget НИСИ Ми suscipit tincidunt. Ut Tempus изречение Risus. Pellentesque viverra sagittis Квам на Маттис. Suspendisse Potenti. Aliquam сидеть Амет gravida nibh, facilisis gravida Одио. Phasellus auctor велит в Lacus blandit , Commodo iaculis Justo viverra. Etiam Vitae Est arcu. Mauris Vel congue Dolor. aliquam Eget ми ми. Fusce Квам tortor, Commodo ас дуй Quis, Bibendum viverra Erat. Меценат Маттис Lectus enim, Quis tincidunt дуй molestie euismod. Curabitur и др диам tristique, accumsan Nunc ес, hendrerit Tellus. < / p> <P> Phasellus fermentum, neque сидеть Амет sodales Tempor, enim анте interdum эрос, Eget luctus Ipsum эрос ут язычок. Nunc ornare Erat Quis faucibus molestie. Proin malesuada consequat Commodo. Mauris iaculis, эрос ут dapibus luctus, Massa enim Elementum Пурус, сидеть Амет tristique Purus Purus включенные в другие группировки Felis. Morbi преддверия Sapien Eget Порта pulvinar. Нам на Quam диам. Proin rhoncus, Felis Elementum accumsan изречение, Felis НИСИ преддверия Tellus, и др ultrices пзиз Felis в Орси. Quisque преддверия СЭМ nisl, Vel congue Leo изречение включенные в другие группировки. Крас Eget Эст на велит sagittis ullamcorper Vel и др Lectus. В HAC habitasse Platea dictumst. Etiam interdum iaculis велит, Vel sollicitudin Lorem feugiat сидят Амет. Etiam luctus, Квам СЕПГ sodales aliquam, Lorem либеро hendrerit Урна, faucibus rhoncus Massa nibh в Felis. Curabitur AC Tempus Nulla, ут зетрег Erat. Vivamus ullamcorper СЭМ Порта, ornare экскретов mauris facilisis ID. </ p> <P> Ut ут пзиз nisl. Fusce porttitor эрос в MAGNA luctus, не congue Nulla eleifend. Aenean porttitor feugiat Dolor сидеть Амет facilisis. Pellentesque venenatis MAGNA Et Risus Commodo, а Commodo turpis gravida. Нам тоШз Massa dapibus Урна aliquet, Quis iaculis Элит sodales. Sed Eget ornare Орси, ес malesuada Justo. Nunc Lacus augue, изречение Quis дуй ID, лациния congue Квам. Nulla СЭМ СЭМ, aliquam включенные в другие группировки Dolor ас, Tempus convallis пипс. interdum и др malesuada FAMEs AC анте Ipsum primis в faucibus. Nulla suscipit convallis iaculis. Quisque Eget Commodo язычок. Связаться с Нами Лев дуй, facilisis Quis eleifend в, aliquet Vitae пипс. Suspendisse fermentum Одио AC Massa ultricies pellentesque. Fusce ес suscipit Massa. </ p> <Hr> <H2 ID = "секция-5"> Часть V </ h2> <P> Нам Eget Purus включенные в другие категории Est consectetur vehicula. Nullam ultrices nisl Risus, в viverra либеро экскретов сидеть Амет. Etiam porttitor Dolor не эрос pulvinar malesuada. Преддверия сидеть Амет Est тоШз Nulla Tempus aliquet. Связаться с Нами luctus hendrerit arcu , не laoreet. Morbi consequat placerat Магна, AC ornare Одио sagittis SED. Донец Vitae ullamcorper Purus. Vivamus не Метус ас Justo volutpat Порта. </ p> <P> Vivamus Маттис accumsan Erat, Vel convallis пзиз Pretium включенные в другие группировки. Integer Nunc Nulla, viverra ут СЭМ не, scelerisque vehicula arcu. Fusce Bibendum convallis augue сидеть Амет lobortis. Крас Порта Урна turpis, sodales lobortis Purus adipiscing идентификатор. Меценат ullamcorper, turpis suscipit pellentesque Fringilla, Massa Lacus pulvinar ми , включенными в другие группировки dignissim велит arcu Eget Purus. Нам на dapibus Tellus, Eget euismod nisl. Ut Eget venenatis Sapien. Vivamus vulputate Varius mauris, Vel Varius nisl facilisis ас. Nulla aliquet Justo nibh ornare, ес congue neque rutrum. </ p> <P> Suspendisse Орси facilisis, dignissim tortor Vitae, ultrices миль. Преддверия iaculis Lacus. Phasellus Vitae convallis язычок, включенные в другие группировки volutpat Tellus. Vivamus scelerisque тоШз nisl, включенные в другие группировки vehicula Элит экскретов а. Sed luctus Метус ID ми gravida, faucibus convallis neque Pretium. Меценат Quis Sapien ут Лев Fringilla TEMPOR Vitae сидят Амет Лео. Донец imperdiet Tempus placerat. Pellentesque pulvinar ultrices Nunc СЕПГ ultrices. Morbi Vel миль Pretium, fermentum Lacus и др, viverra Tellus. Phasellus sodales либеро включенные в другие группировки ДЩ convallis, сидеть Амет fermentum Sapien auctor . преддверия анте Ipsum primis в faucibus Орси luctus др ultrices Дознание cubilia Curae ;. Сед ес Elementum nibh, Quis Varius либеро </ p> <P> Morbi СЭД fermentum Ipsum. Morbi Орси vulputate tortor ornare blandit Quis Орси. Донец aliquam sodales gravida. УТ ullamcorper НИСИ, ас Pretium велит. Преддверия Vitae Lectus volutpat, consequat Lorem сидят Амет, pulvinar Tellus. В tincidunt Vel Льве Eget pulvinar. Curabitur в эрос нон Lacus malesuada aliquam. Связаться с Нами и др Tempus Одио. целое а Квам пипс. В HAC habitasse Platea dictumst. aliquam Porta nibh Nulla, и др Маттис turpis placerat Eget. Pellentesque дуй диам, pellentesque Vel gravida ID, accumsan ес Магна . Сед зетрег arcu, ут dignissim Лео. </ p> <P> Сед Vitae lobortis диам, ID molestie Магна. Aliquam consequat Ipsum Quis Est изречение ultrices. Aenean nibh велит, Fringilla в диам ID, blandit hendrerit Lacus. Донец vehicula rutrum Tellus Eget fermentum. Pellentesque AC Erat др arcu ornare tincidunt. Aliquam Erat volutpat. Vivamus lobortis Урна Quis gravida зетрег . В condimentum, ЭСТ faucibus luctus, ми Dolor Cursus ми, ID vehicula arcu пзиз nibh. Pellentesque blandit Sapien Lacus, Vel vehicula Nunc feugiat сидят Амет. </ p> </ Div> </ Div> </ Div> </ Body> </ HTML>

    Попробуйте »

    Результаты следующие:

    Дополнительная навигация (Аффикс) плагин Javascript

Позиционируя CSS

В приведенном выше двух с дополнительной навигацией (аффикс) режиме Plug-In, вы должны пройти через содержание позиционирования CSS. Дополнительная навигация (Аффикс) плагин переключения между тремя класса, каждый класс показали определенноесостояние:.affix, .affix-верхи .affix-низ.Выполните следующие действия, чтобы создать свой собственный CSS для этих трех государств (не полагаться на этот плагин).

  • В начале, добавьтеплагин .affix-верхний элемент , чтобы указать в своем верхнем положении.На этот раз не требует позиционирования CSS.
  • При прокрутке добавления дополнительных навигационных элементов (аффикс), оно должно привести фактическую дополнительную навигацию (аффикс). На этом этапе.affix заменит .affix-топ,и установитьположение: фиксированная; (предоставляетсяBootstrap кодом CSS).
  • Если вы определяете нижнюю часть смещения, когда прокрутки достижения этой позиции следует заменить.affix .affix дном.Так как смещение не является обязательным, если вы установите смещение требуется одновременно установить соответствующий CSS. В этом случае добавьтепозицию , когда необходимо: абсолютное ;.

опции

Есть несколько вариантов, через атрибуты данных или JavaScript, чтобы пройти. В следующей таблице перечислены следующие параметры:

选项名称类型/默认值Data 属性名称描述
offsetnumber | function | object
默认值:10
data-offset当计算滚动位置时,距离顶部的偏移像素。如果设置了一个数字,则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移,则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移,请使用函数。