У меня есть навигация с бутстрапом аффикса и вы хотите изменить активный li при прокрутке. Я пробовал то, что когда-либо давалось в документации, но не смог исправить это. Может ли кто-нибудь помочь мне в исправлении? Вы можете увидеть мою страницу в адресе http://www.thephpcode.com/help/website-generation-using-pcg.htmlВ bootstrap 3.0 affix как установить активный класс
Функциональность, которую вы запрашиваете, предоставляется плагином Scrollspy. С другой стороны, все, что affix делает, это предоставить вам фиксированный nav после определенного смещения. Поскольку аффикс часто используется в сочетании с Scrollspy, это может быть источником путаницы в отношении роли каждого из плагинов.
Чтобы использовать плагин scrollspy на вашей странице, добавьте следующие атрибуты в элемент <body> вашей страницы.
Добавить идентификатор в <div> контейнера nav вашего списка элемента:
<div class="col-md-3" id="sidenav">
<ul class="nav nav-list pcg-help-affix affix-top" data-toggle="affix" data-spy="affix" data-offset-top="200" id="navbar2">
применить Scrollspy плагин для вашего <body> элемента:
<body style="" data-spy="scroll" data-target="#sidenav">
сейчас класс active переключается, когда вы sc рулон (см. demo).
Но не отличается стиль не применяется к ссылкам. Это потому, что вам нужно исправить пару вещей с помощью navbar. не nav-list больше не используется в Bootstrap 3. Используйте вместо классов nav-pills и nav-stacked для приятного эффекта:
<ul class="nav nav-pills nav-stacked pcg-help-affix affix-top" data-toggle="affix" data-spy="affix" data-offset-top="200" id="navbar2">
Кроме того, начальная страница должна применять .active класс в ссылку «Настройки» вместо «Design» ссылка.
Проверьте это как рабочий demo.
Это работало без добавления id = "sidenav" и data-target = "# sidenav" после добавления data-spy = "scroll". Я уже пробовал этот сценарий, но пропустил, что nav-list не является загрузочным 3. Так что, когда я проверял пользовательский интерфейс, я думал, что активный класс не меняется. После того, как вы упомянули, я проверил инструмент разработчика и нашел его. Спасибо. – Nishanthan
Я думаю, вам нужно использовать плагин scrollspy для этого. –