Bootstrap Affix ( bottom class )

Question

hello all i have a bootstrap Affix , The broblem is the #sideBarContainer is take the rop class perfect , and when i scroll the class change to Affix perfect too , but when i arrive to the point that i need it to stop and change the class to bottom-affix , not stop :( why ??

$('#sideBarContainer').affix({
  offset: {
    top: 100,
    bottom: 200,

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sideBarContainer">
  <div class="ReadHeaderSections">
    <p></p>
  </div>
</div>

score 2 · Answer 1 · answered Aug 10 '14 at 12:25

2

From the docs:

If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.

CSS (or Less):

.affix-bottom {
    position: absolute;
}

answered Aug 10 '14 at 12:25

Bass Jobsen

48,736
16
143
224

u didnt understand me , of course i can add this class , but the div class when i scroll change to .affix bot not change to .affix-bottom , so the div can`t read ur class ! – Mohamed Samy Aug 10 '14 at 12:33
1

try `#sideBarContainer.affix-bottom` as a selector with a higher specificity – Bass Jobsen Aug 10 '14 at 12:35
:( i know what did you mean , but the Div not define with affix-bottom when its be in the bottom ! – Mohamed Samy Aug 10 '14 at 12:38
Has you affixed element enough height? the .affix-bottom is the number of pixels from the bottom of your page. The bottom of the element you affix will scroll till this position. – Bass Jobsen Aug 10 '14 at 13:40
Can you give me a example ? – Mohamed Samy Aug 10 '14 at 14:00

score 0 · Answer 2 · answered Oct 26 '17 at 20:19

0

This will not work with the coma after the last element in a query

bottom: 200,

instead use

bottom: 200

answered Oct 26 '17 at 20:19

Edizkan Ata

1
1

Bootstrap Affix ( bottom class )

2 Answers2