Login/Register
Bootstrap affix not working with bootstrap class
Asked Answered
csstwitter-bootstrapaffixbootstrap-affix
O

1

13

I am relatively new to bootstrap and trying to design my page with bootstrap affix. Here in code When I removes my col-lg-6 class from that is located inside affix targeted div it works perfectly fine but it doesn't work with given bootstrap class is applied there. I tried after removing that particular class at that time it works exactly fine.

<body id="top" data-spy="scroll" data-target="#header">
  <header id="header" style="background-position: 0% 0px;">
    <a class="image avatar" style="cursor: pointer;">
      <img src="resources/images/Nimesh.jpg" alt=""></a>
    <h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>

    <ul class="nav nav-tabs nav-stacked" data-spy="affix">
      <li class="active"><a href="#section-1">Section One</a></li>
      <li><a href="#section-2">Section Two</a></li>
      <li><a href="#section-3">Section Three</a></li>
      <li><a href="#section-4">Section Four</a></li>
      <li><a href="#section-5">Section Five</a></li>
    </ul>

  </header>

  <div id="profileImage">

  </div>

  <div id="main">
    <div id="section-1" class="background">
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
    </div>

    <div id="section-2" class="background">
      <div class="col-lg-6">
        <!--content 2a  -->
      </div>
      <div class="col-lg-6">
        <!--content 2b  -->
      </div>
    </div>

    <div id="section-3" class="background">
      <div class="col-lg-6">
        <!--content 3a  -->
      </div>
      <div class="col-lg-6">
        <!--content 3b  -->
      </div>
    </div>

    <div id="section-4" class="background">
      <div class="col-lg-6">
        <!--content 4a  -->
      </div>
      <div class="col-lg-6">
        <!--content 4b  -->
      </div>
    </div>

    <div id="section-5" class="background">
      <div class="col-lg-6">
        <!--content 5a  -->
      </div>
      <div class="col-lg-6">
        <!--content 5b  -->
      </div>
    </div>
  </div>
</body>
Otherwhere answered 2/4, 2015 at 14:9 Comment(0)
H
23

This issues could be broken down into 2 parts:

  1. To use Bootstrap Grid System (e.g. col-lg-6)
  2. To use Bootstrap Affix with your secions


1. Bootstrap Grid System

To make the grid system working correctly, 3 classes are required: .container, .row, .col-xs-*.

  • .container: Should be add to the wrapper of your document.
  • .row: when you want to setup the columns, you have to wrap those columns with a .row wrapper.
  • .col-xs-*: This is where you can set the width of your content.

So your document should be something like this:

<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-3"></div>
  </div>
</div>

The document for the grid system is here.

In your case, it seems like you didn't provide .row nor .container for your columns, so the actual layouts would be broken and unexpected to some degree. I think this is probably the reason why if you remove those col-lg-* classes it works as you want.


2. Bootstrap Affix

The official document for Affix is pretty vague actually. Basically, when you scroll down your document, the <div data-spy="affix"> element will shift from the following states:

  1. Add .affix-top to your spy element when the page is loaded
  2. Whenever you scroll to the value of data-offset-top, it will remove the .affix-top class and add a .affix class to the same element.
  3. Whenever you scroll to the value of data-offset-bottom, it will remove the .affix class and add a .affix-bottom class to the same element.

As the document mentioned, you HAVE TO set the css rules for these classes to make the affix plugin works.

There are 3 important rules you have to set: 1. The width of .affix-top, .affix, .affix-bottom 2. The position you want for your affix element when it is fixed 3. Recover the .affix-bottom position from fixed to absolute

So your css would be something like this:

.affix {
  top: 0;
  width: 100%;
}

.affix-top {
  width: 100%;
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}


Here's a rough Codepen example for using affix. I've copied your codes and it works whether you add col-lg-6 in your section or not. You may resize the window to see your 2 columns layout.

One thing need mention is that I am not quite sure why you put your affix element in your header since it is used for showing the section title list on sidebar in most design cases. With that in sense, I move it out from the header to the main area with a column setting in grid.

Hope this would help.

Harem answered 17/4, 2015 at 3:35 Comment(1)
I have a similar problem with my code. You are the only one who points out the class names so I ask you this. I have added the affix code using javascript. I have added the css rules as well. But the thing is the element get the affix-top class on page load, but as I scroll, it does not change to affix class. It remains affix-top itself. I inspect and change the class manually and it works as expected. Any solution? – Confect

© 2022 - 2024 — McMap. All rights reserved.