0

I'm trying to use the Bootstrap affix to create two "sticky" blocks side by side on top in the content area but they do not behave as expected. They always either overlap each other and/or the content or does not fill their parent.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
            <text id="menu"></text>
        </div>
        <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-lg-push-9 col-md-push-9 col-sm-push-9 col-xs-push-9" id="sticky2" data-spy="affix">
                    <text id="right"></text>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-9 col-xs-9" id="sticky1" data-spy="affix">
                     <h1><span class="hidden-lg hidden-md hidden-sm">XS</span><span class="hidden-lg hidden-md hidden-xs">SM</span><span class="hidden-lg hidden-sm hidden-xs">MD</span><span class="hidden-md hidden-sm hidden-xs">LG</span></h1>
                    <text id="top"></text>
                </div>
                <div class="row">
                    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
                        <div class="row contentRow" id="contentRow">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: yellow;">
                                <text id="content"></text>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Have a look at this fiddle: http://jsfiddle.net/halvorsen/1zv6gqwu/42/

Any suggestion on how to solve this?

Do I have to set the size on the "sticky" blocks using JavaScript?

creimers
  • 4,975
  • 4
  • 33
  • 55
halvorsen
  • 411
  • 1
  • 6
  • 14
  • 1
    Yes, since the affix uses absolute position, it takes the element out of the page flow. According to the docs "you must provide CSS for the positioning and width of your affixed content" http://getbootstrap.com/javascript/#affix – Carol Skelly Oct 03 '14 at 13:08
  • There are solutions like this that work more smoothly https://github.com/peachananr/autofix_anything is one choice – Christina Oct 03 '14 at 14:12

0 Answers0