Scrollspy просто активен последней кнопкой на панели навигации

Это просто активная последняя кнопка навигационной панели.

Я пытался использовать разные значения для смещения данных, но, похоже, не работает.

    <body id="page-top" class="index">

    <nav id = "menu"class="navbar navbar-default navbar-fixed-top">
        <div class="container">
                <a class="navbar-brand" href="#page-top">Test site</a>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="#servers">section 1</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">section 2</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
<div data-spy="scroll" data-target="#menu" data-offset="0">
    <section id="servers">
....

    </section>

    <section id="about" class="success text-center about-section">
          ....
      </div>
      </section>

Jsfiddle: http://jsfiddle.net/hunterfps/h1akyg1m/2/

Источник

1 ответ

Цитирование из документации Bootstrap:

Чтобы легко добавить поведение scrollspy к навигации на верхней панели, добавьте data-spy="scroll" к элементу, на который вы хотите шпионить (чаще всего это будет <body>). Затем добавьте атрибут data-target с идентификатором или классом родительского элемента любого компонента Bootstrap .nav.

В вашем примере вы применили прокрутку не к телу, а к div и навигация была за пределами этого. Если вы примените прокрутку к body вместо тега это теперь будет работать:

<body id="page-top" class="index" data-spy="scroll" data-target="#menu">
    <nav id = "menu"class="navbar navbar-default navbar-fixed-top">
        ...
    </nav>
    <section id="servers">
        ...
    </section>
    <section id="about" class="success text-center about-section">
        ...
    </section>
</body>
Источник
Другие вопросы по тегам