0

** Updated **

So after some more investigation I have narrowed it down to this piece of javascript preventing the affix class to work.. but again.. I'm not sure why this would break the page??

    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
});

I have been trying to figure out why the affix class breaks when I have a slide out menu. The site I am currently working on is this: site link

If you see the other pages, the menu will stick to the top after you scroll down. But the criminal page it doesn't work. I have narrowed it down to this part of the HTML that is causing it not work, but I just can't seem to figure out why. There doesn't look like there is anything special about that div tag.

<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>

When I remove this div, it works. Any help or a push in the right direction would be great!

Thanks

icekomo
  • 9,328
  • 7
  • 31
  • 59
  • Just use affix without the scroll-spy and it will work – Christina Oct 03 '14 at 18:57
  • Christina - What scroll-spy? – icekomo Oct 03 '14 at 21:51
  • The one on your body tag – Christina Oct 03 '14 at 22:11
  • That's what I thought you meant.. but that doesn't seem to make a difference. I also thought that tag was being used for the scroll action of the sub menu.. but the scrolling does seem to still work without it..any other ideas? – icekomo Oct 03 '14 at 22:15
  • Change the containerSelector to some other div on your page, not body and see what happens. – Christina Oct 04 '14 at 01:15
  • Thanks Christina, changes it fixe the affix issue, but then my burger button no longer works. What does that containerSelector that is set to body by default do? – icekomo Oct 04 '14 at 01:52
  • The body is being used by the affix by Bootstrap, I would say that you need to either use the affix on an something else, perhaps put a div with no styling around the entire page beginning after the beginning body tag and before the closing body tag then put the affix on that container and then put the body as the value back in. This is not the way I would do it. You absolutely don't need the burger thingy, it's easy enough to make that yourself and have one line of jquery (toggleClass). – Christina Oct 04 '14 at 02:45
  • Do you know what is causing the issue? I tried to do what you told me to do, and it still doesn't stick the menu at the top on scroll. – icekomo Oct 04 '14 at 03:23
  • I took the data spy off all the tags, as I don't really need that, but that didn't change anything. – icekomo Oct 04 '14 at 03:31
  • Well, there are no errors in your page, so what I think the problem is that the body is being used by the Burger script or Scotch script which wraps the page in its own styles and it conflicts with Bootstrap's affix system, either one of these functions or both can be created that don't conflict. You can try wrapping the page in another div and assigning the data-spy=scroll to that so that the affix works and perhaps it not being on the body tag will not conflict with the other script, this is a guess. Other than that, that's the best I can tell you. – Christina Oct 04 '14 at 04:04
  • Thanks for all your help Christina! After doing some more research I ended up grabbing another plugin and got that working. Thanks again! – icekomo Oct 04 '14 at 16:09

1 Answers1

0

This might be the cause for it. Test by removing it.

<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>
Fergoso
  • 1,584
  • 3
  • 21
  • 44