Twitter Bootstrap Scrollspy выделяет только последний элемент

Я работаю над плагином для загрузки Bootstrap Scrollspy, но для жизни я не могу заставить его работать. Вот HTML для области содержимогоTwitter Bootstrap Scrollspy выделяет только последний элемент

<div data-spy="scroll" > 
    <section id="page_home" class="page_home" style="width:100%;background-color:rgb(245,245,245);"> 
    <div class="container"> 
     Home 
    </div> 
    </section> 

    <section id="page_projects" class="page_projects" style="width:100%;background-color:rgb(25,25,25);"> 
    <div class="container"> 
     Projects 
    </div> 
    </section> 

    <section id="page_services" class="page_services" style="width:100%;background-color:rgb(245,245,245);"> 
    <div class="container"> 
     Services 
    </div> 
    </section> 

    <section id="page_downloads" class="page_downloads" style="width:100%;background-color:rgb(25,25,25);"> 
    <div class="container"> 
     Downloads 
    </div> 
    </section> 

    <section id="page_about" class="page_about" style="width:100%;background-color:rgb(245,245,245);"> 
    <div class="container"> 
     About 
    </div> 
    </section> 

    <section id="page_contact" class="page_contact" style="width:100%;background-color:rgb(25,25,25);"> 
    <div class="container"> 
     Contact 
    </div> 
    </section> 
</div>

и здесь является HTML код для навигационной панели

<div id="navbar" class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
     <li><a href="#page_home">Home</a></li> 
     <li><a href="#page_projects">Projects</a></li> 
     <li><a href="#page_services">Services</a></li> 
     <li><a href="#page_downloads">Downloads</a></li> 
     <li><a href="#page_about">About</a></li> 
     <li><a href="#page_contact">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</div><!-- /.navbar -->

Я смотрел на некоторые другие должности, но для жизни меня я могу Не выясните, почему он отобрал только последний элемент в навигационной панели.

Может ли кто-нибудь помочь мне выяснить, почему scrollspy выбирает только последний элемент и как его исправить?

источник

2013-07-10 Robert E. McIntosh

Это body, на котором вы хотите следить.

Вместо

<div data-spy="scroll" >

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

<body data-spy="scroll" data-target="#navbar">

источник

2013-07-10 15:58:57 Mati

Ничего себе, я думал, что я попробовал это, и это не работает, но это, кажется, работает только он не не изменяет до он попадает в нижнюю часть области содержимого. Вот сайт, на котором я его тестирую: http://pwbguild.com/test/demo.html –

Если это ваш сайт, то хорошие новости, его работа :) Я в FF последний, но он работает так, как ожидалось для меня. Вы пытались нажимать CTRL-F5 на клавиатуре, чтобы заставить страницу полностью обновить себя и все файлы, связанные с внешними файлами? – rtpHarry

То же самое здесь, работает просто отлично ... – Mati

Если бы беглый взгляд на the documentation for ScrollSpy, и кажется, что вам не хватает data-target.

В вашем случае, если ваша первая линия будет:

<div data-spy="scroll" data-target="#navbar">

источник

2013-07-10 15:58:57 rtpHarry

Спасибо, но я не смог заставить это работать. –

Попробуйте этот код:

$('[data-spy="scroll"]').each(function() { 
    var $spy = $(this).scrollspy('refresh') 
    });

Я сталкивался с подобной проблемой. Я решил проблему, используя приведенный выше код.

источник

2013-11-06 07:31:13 Jey

Добавление декларации HTML DOCTYPE в верхней части страницы фиксированной для меня:

<!DOCTYPE html>

источник

2016-04-01 05:39:04 Curt

Добро пожаловать в stackoverflow; вы хотели бы прочитать [помощь по форматированию] (http://stackoverflow.com/editing-help) –

Спасибо, это сработало для меня –

Это был МЕНЬШЕ, ЧТО Я ожидал работать. Благодаря! –

Twitter Bootstrap Scrollspy выделяет только последний элемент

ответ

Смежные вопросы