0

I have a special situation where I am trying to use affixes. So on the left side, I have navigation and on the right side, I have content. Navigation is a lot longer than content so I want to use affix on the content so that will always be visible. So far so good. The problem is when I am on the bottom of the page and I change the content on click. The container have affix-bottom class and is naturally pined to the bottom. I get an empty space over the content or is the content overflowed over the footer. On the scroll, it works OK. My question is, is it possible somehow to reset affix on click as same as on scroll? 

$('#div').affix({
                    offset: {
                        top: 150,
                        bottom: function () {
                            return (this.bottom = $('#page-footer').outerHeight(true))
                        }
                    }
            });
$('#div').affix('checkPosition');

I've tried to remove classes, to simulate scrolling and almost every option that I could find on the web. But nothing really works. Thanks!

Anandhu Raj
  • 137
  • 1
  • 6
ABoooo
  • 161
  • 1
  • 3
  • 15

1 Answers1

0

So after a few days of trying all sorts of possibilities I've found a solution. Instead of reset an affix on click I call $('#div').affix('checkPosition'); once more, after content load. After the content is loaded the affix function is called with 'checkposition' and that has done the trick. Affix is new initialized and the content is correctly positioned.

ABoooo
  • 161
  • 1
  • 3
  • 15