Question

I’m using Twitter Bootstrap and I have the following:

<div class="row">

    <div class="span3">
        <div data-spy="affix">
            <form>
                <!-- inputs and stuff -->
            </form>
        </div>
    </div>

    <!-- span9 and its contents -->

</div>

Bootstrap is correctly applying the affix effect on <div> and it stays still when I scroll down the page. However, once I resize the page to mobile dimensions and bootstrap responsive effects take place (navbar collapsing/objects aligning nicely under each other), the affixed <div> is now on top of other elements of the page and it gets messy. This is happening because .affix has position: fixed which explains it pretty well.

Now I went to Bootstrap‘s website and resized the page to mobile dimensions, the affixed element (<ul> in their case) starts flowing nicely with the page, taking its natural place without going on top of other elements. I have also noticed that once that happens, the class is changed from affix to affix-top.

I’m not sure if this is their customization or if it’s part of the framework, because the framework is apparently not behaving the same way. Can anyone elaborate on this? I need to have the same behavior on my <div> where if the page gets resized to mobile dimensions the affixed element takes its natural place.

Edit: My observation is a bit flawed. I noticed that the element on their page initially has affix-top and once I scroll below data-top-offset it changes to affix. It still doesn’t explain why my <div> won’t render like their <ul> when resized.

Answer 1

Bootstrap uses an extra CSS file for their docs that overrides the default behavior of some elements.

Specifically, on line 917, they change the position of the affixed sidebar (as part of a media query for <767px width) to static:

.bs-docs-sidenav.affix {
  position: static;
  width: auto;
  top: 0;
}

They have several additional custom styles applied to the affixed sidebar; you can view them by using Chrome Web Inspector/Firebug on a phone-sized window.