Twitter bootstrap affix with infinitescroll and window.resize

Question

From reading a few related questions on this I realize that there is no $.affix('refresh') method available at all for the twitter bootstrap affix component - my issue, although related, may be even an additional step between just a refresh, let me try to explain.

I have a page with the standard bootstrap navbar. below which i will affix a sub-nav that "pins" once the user scrolls past x-pixels (in my case the navbar has a height of 41px so at 41px the affix kicks in and by changing the .affix class to .affix {top:41px} all is well)

So for this first affix I can use the html-only attributes.

Further down the page (can be considered a "second page" in essence) I have another piece of navigation which should "affix" and replace the first sub-nav once the user scrolls to a certain position - given that the location of the second page/affix is variable due to content I use js to calculate the height of the first page and set the offset: {top:xxx} based on what I get.

This also works great/as expected where the user scrolls down a bit, the first sub-nav affix kicks in, if he keeps scrolling and reaches the second sub-nav further down the page it kicks in and replaces the first affix'ed sub-nav (it actually does not replace it per se but rather overlays with a higher z-index)

From here on I have two issues that I have not been able to find a solution for:

1. when the user re-sizes the window the content of the first page becomes longer of course which changes my original offset-top dimensions for the affix down the page. First I thought a simple call to .affix('refresh') would/could be the solution but of course this method is not even available on the component. Next, I thought I can just manually re-calculate the height again and re-create $('.my-second-affix').affix({offset: {top:x-new-offset}}); - BUT for some reason this does not seem to work at all and I can't figure out why :(

2. the next issue to tackle then is that I'm also using jquery infinitescroll to load up more and more pages... each page may have other sub-nav's at various stages which I would like to affix and replace which ever last affix is now at the top.

Note I would then also like to make sure that if the user scrolls back the other direction that the previously affixed sub-navs would re-affix themselves going backwards (which I suspect they will just fine as long as the affix offsets are correct)

Hopefully, this explanation is sufficient to highlight my problem and someone either has dealt with this before or could offer some guidance towards a solution. I've tried to have the offset be a function that returns the current offset from the top as well (as mentioned in another question Twitter bootstrap change affix offset) but for some reason that does not work as expected either.

Any help is greatly appreciated

Secant

This is by no means answer, but an aid. I had a similar (though too different to be applicable) situation with $.fn.affix. I had to write a function that fired on resize. I recommend using underscore or lodash or writing your own debounce function. Very useful for reducing javascript load and also can help prevent jerkiness during changes. Info on writing your own here: davidwalsh.name/javascript-debounce-function – Belk

What about adding all the different sub-navs as second, third, etc. rows inside your bootstrap nav and just hiding or showing them based on how far down the user has scrolled? – Consequence

Answer 1

Have you tried $('#myAffix').affix('checkPosition'). This is available in Bootstrap3.0

Tobey

Answer 2

This question is pretty old but since no one else has answered it...

I had a similar problem with affix. Here is how I solved it.

$('.affixed-elements').each(function() {
   var topOffset = 0; //calculate your top offset here
   var $container = //Set this to the element's container;
   $(this).affix({
      offset: {
         top: function() {
            return $container.offset().top - topOffset;
         },
         bottom: function() {
            return $('body').height() - ($container.offset().top+$container.outerHeight());
        }
      }
   });
});

Those settings should keep the affixed element within the borders of its container even after window resizes.

Tableware

Answer 3

If I understood correctly you will need to calculate the offset on resize. This example is using Jquery Something like:

$(window).resize(calcOffset);

    function calcOffset() 
         {
            var location = $("myElement").offset();
            var top = location.top;
         }

Captive

Answer 4

I will recommend you to use offset in the code itself like this <div class="col-md-offset-6">.

Fitted

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Aqueduct

okay, i think we learn by helping each other. We always learn one thing or the other by sharing what we know, brother. – Fitted