Bootstrap Affix работает только на страницах без выдвижного меню

** Обновлено **

Итак, после еще нескольких исследований, я сузил его до этого фрагмента javascript, препятствующего работе класса аффикса... но опять же... я не уверен, почему это сломает страницу??

    var panelExample = $('#someID').scotchPanel({
    containerSelector: 'body', // Make this appear on the entire screen
    direction: 'left', // Make it toggle in from the left
    duration: 300, // Speed in ms how fast you want it to be
    transition: 'ease', // CSS3 transition type: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(P1x,P1y,P2x,P2y)
    clickSelector: '.toggle-panel', // Enables toggling when clicking elements of this class
    distanceX: '300px', // Size fo the toggle
    enableEscapeKey: true // Clicking Esc will close the panel
});

Я пытался понять, почему класс аффикса ломается, когда у меня есть выдвижное меню. Сейчас я работаю над следующим сайтом: ссылка на сайт

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

<div id="burgerWrapper" class="toggle-panel">
    <h3 id="closeBtn">X</h3>
    <ul>
        <li class="hidden"><a class="page-scroll" href="#page-top"></a></li>
        <a href="#criminalLaw" class="page-scroll"><li>CRIMINAL LAW</li></a>
        <a href="#criminalLocalCourt" class="page-scroll"><li>LOCAL COURT MATTERS</li></a>
        <a href="#criminalMentalHealth" class="page-scroll"><li>SECTION 32 APPLICATIONS</li></a>
        <a href="#criminalConviction" class="page-scroll"><li>CONVICTION AND SEVERITY APPEALS</li></a>
        <a href="#criminalBail" class="page-scroll"><li>BAIL APPLICATIONS</li></a>
        <a href="#criminalSerious" class="page-scroll"><li>SERIOUS CRIME</li></a>
        <a href="#criminalPenalties" class="page-scroll"><li>PENALTIES AND SENTENCES</li></a>
        <a href="#criminalFee" class="page-scroll"><li>FEE ARRANGEMENTS</li></a>
    </ul>
</div>

Когда я удаляю этот div, он работает. Любая помощь или толчок в правильном направлении были бы замечательными!

Спасибо


html css twitter-bootstrap-3 affix
person icekomo    schedule 03.10.2014    source источник
comment
Просто используйте аффикс без прокрутки-шпиона и все заработает   -  person Christina    schedule 03.10.2014
comment
Кристина – Какой свиток-шпион?   -  person icekomo    schedule 04.10.2014
comment
Тот, что на тэге твоего тела   -  person Christina    schedule 04.10.2014
comment
Это то, что я думал, что вы имели в виду... но, похоже, это не имеет значения. Я также думал, что этот тег используется для действия прокрутки подменю... но прокрутка, кажется, все еще работает без него... есть другие идеи?   -  person icekomo    schedule 04.10.2014
comment
Измените containerSelector на другой div на вашей странице, а не на body, и посмотрите, что произойдет.   -  person Christina    schedule 04.10.2014
comment
Спасибо, Кристина, изменила это, чтобы исправить проблему с аффиксом, но тогда моя кнопка гамбургера больше не работает. Что делает этот containerSelector, для которого по умолчанию установлено значение body?   -  person icekomo    schedule 04.10.2014
comment
Тело используется аффиксом Bootstrap, я бы сказал, что вам нужно либо использовать аффикс для чего-то еще, возможно, поместить div без стиля вокруг всей страницы, начиная после начального тега body и перед закрывающим тегом body затем поместите аффикс в этот контейнер, а затем верните тело в качестве значения. Я бы не стал этого делать. Вам абсолютно не нужна гамбургерная штучка, достаточно легко сделать это самостоятельно и иметь одну строку jquery (toggleClass).   -  person Christina    schedule 04.10.2014
comment
Вы знаете, что вызывает проблему? Я попытался сделать то, что вы сказали мне сделать, и это все еще не прикрепляет меню вверху при прокрутке.   -  person icekomo    schedule 04.10.2014
comment
Я удалил шпионские данные со всех тегов, так как мне это действительно не нужно, но это ничего не изменило.   -  person icekomo    schedule 04.10.2014
comment
Что ж, на вашей странице нет ошибок, поэтому я думаю, что проблема в том, что тело используется сценарием Burger или сценарием Scotch, который оборачивает страницу в свои собственные стили и конфликтует с системой аффиксов Bootstrap, любой из этих функции или обе могут быть созданы, которые не конфликтуют. Вы можете попробовать обернуть страницу в другой div и присвоить ему data-spy=scroll, чтобы аффикс работал, и, возможно, его отсутствие в теге body не будет конфликтовать с другим скриптом, это предположение. Кроме этого, это лучшее, что я могу вам сказать.   -  person Christina    schedule 04.10.2014
comment
Спасибо за помощь Кристине! Проведя еще несколько исследований, я остановился на другом плагине, и он заработал. Спасибо еще раз!   -  person icekomo    schedule 04.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Это может быть причиной для этого. Проверьте, удалив его.

<section id="burgerIcon">
        <button type="button" class="navbar-toggle toggle-panel">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
</section>
person Fergoso    schedule 03.10.2014
comment
Нет, все еще не работает ... работает только тогда, когда я удаляю div burgerWrapper ... но я не знаю, почему. - person icekomo; 03.10.2014