1

I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.

Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.

I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.

Here is the relevant code:

<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
                <img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
                <div class="pad">
                    <ul class="nav nav-pills nav-stacked">
                        @include('partials/menu')
                    </ul>
                </div>
                <div style="background-color: white; height: 10px; border:0px"></div>
                <div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
                    <a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
                        <img class = "img-responsive" src="/img/img.png" alt="...">
                        <div class="caption">
                            <h5 class="text-center">Some Caption</h5>
                        </div>
                    </a>
                </div>
            </div>

You can see what I am talking about here:

https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20

There it might be easier to follow the CSS as well.

Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.

I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!

Thanks!

Brian

Brian
  • 561
  • 5
  • 16
  • If you remove the .affix { position: fixed } the weird width addition is gone. Do I understand correctly that you want to let your sidebar stay fixed when the user scrolls further in the page content while the sidebar doesn't have content left? – Daan Seuntjens Aug 24 '19 at 18:00
  • Hi, from page to page the main content will differ. So on pages where there will be fair amount of scrolling, having the left sidebar stay fixed is the desired behavior. – Brian Aug 24 '19 at 19:53
  • I just searched the entire site directory and don't see .affix { position: fixed } anywhere. The only reference to ,affix that I see in my sass files is #sidebarmenu.affix-bottom { position: absolute; } – Brian Aug 25 '19 at 07:43
  • Ok, found it under bootstrap-sass. But when I remove the .affix { position: fixed } line the functionality of affix stops working. That is, the sidebar stays at the top and does not stay in view when scrolling. – Brian Aug 25 '19 at 08:34
  • Great, I will look into that part, will try to answer tomorrow – Daan Seuntjens Aug 26 '19 at 11:40

0 Answers0