The .affix-bottom class doesn't work for the twitter bootstrap affix plugin

Question

I've tried many syntaxes with data-attributes and Javascript syntax in order to get the .affix-bottom class set for the affixed object when I scroll down, but it doesn't work. When I inspect the affixed element, the .affix class doesn't change into .affix-bottom when I reach the bottom of the page by scrolling down.

I've tried a lot of snippets inclluding those provided in the official documentation:

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

====

$('#my-affix').affix({
  offset: {
    top: 100
    , bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Have I missed something?

THank's in advance.

Can you post your HTML markup too -- or create a [Bootply](http://bootply.com)? — Carol Skelly, Apr 07 '14 at 14:36

score 0 · Answer 1 · answered Apr 07 '14 at 14:33

0

Your div should be like this

<div id="my-affix">

Since you're refering to that div id in jQuery. The affix js wasn't listening the html data elements for me either, but this should work!

answered Apr 07 '14 at 14:33

mrBrown

153
1
10

score 0 · Answer 2 · answered Apr 17 '15 at 03:46

This is simply because you set data-offset-bottom="200" directly in your HTML tags already.

Since you didn't set the id in your HTML tags, there's no way your jQuery selector could get that element.

To make this works: 1. Add id to your element 2. Remove both data-offset-top and data-offset-bottom if you are going to calculate the bottom dynamically.

So the result would be something like this:

<div id="my-affix" data-spy="affix">
  ...
</div>
 ...
<div class="footer></div>
====

$('#my-affix').affix({
  offset: {
    top: 100
    , bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

The .affix-bottom class doesn't work for the twitter bootstrap affix plugin

2 Answers2