Update ScrollToFixed when using tabs

[haurg]

Hello,

first of all thanks for this great plugin!!!!!!

But now I've come to a point where I don't know how to solve this issue. I've created a fiddle: http://jsfiddle.net/zTJF7/6/

The black box at the bottom should be fixed all the time until the page scrolls to the end of div#middle.

But when I use Tabs or accordions the fixed element ("blackbox") with different heights Scrolltofixed doesn't recalculate the position or changes fixed to absolute or vice versa.

Use situations to trigger this problem:

1. Open Tab1
2. Scroll down till the tab-menue is at the very top of your viewpoint
3. change to Tab12

The blackbox jumps up.

I tried already man possibilites to smooth these actions. Tried to animate these changes and ended up with 100 lines of conditions, tried to calculate the height of the next tab. I was working on that problem for more than 30 hours with no solution.

Has anybody an idea to solve this issue?

Thanks for your help.

Cheers,

haurg

[bigspotteddog]

Which browser are you using? I am looking at your fiddle in Chrome on OS X and I am not seeing the black box jump when I switch to Tab12 after scrolling the menu to the top with Tab1 visible. It could be a browser specific issue.

Also, here is something to try. When the tabs are switched, tell the plugin to recalculate the page by calling $(window).resize(). That might correct the issue you are seeing.

[haurg]

Thanks so much for your help so far!!!!!! But it didn't work with your suggestion.

I've totally rewritten my code so I've created a new fiddle: http://jsfiddle.net/8fTWa/17/ But still the old problem.

I'm looking at the fidde in FireFox on W7. The fiddle didn't work in chrome (don't know why).

The problem now is that my new tab moves the fixed footer down to the bottom until I scroll. Problem: go to tab12 scroll a little bit down until footeer (#bottom) goes absolute and click on tab1 -> footer is absolute on the bottom!!!!

Here is my initial description of what I want.

I want to have my fixed footer (#bottom) to be fixed at 300 px from the top. bottom: function(){ var winHeight = $(window).height(); var bottomPos = winHeight-fixPos-bottomHeight; return bottomPos; }, Is there a better solution?

marginTop doesn't work for me because it doesn't create the spacer div.

My limit function:

limit: function(){ var winHeight = $(window).height(); var bottomPos = winHeight-fixPos-bottomHeight; var limit = $('div#middle').offset().top+$('div#middle').outerHeight(true)-bottomHeight+(bottomHeight+bottomPos); console.log(limit); return limit; },

It is a little bit complicated but i couldn't find an easier one.

My tab problem is that $('div#middle').outerHeight(true) isn't the height of my new tab. It is still the height of the old one. So my fixed footer (#bottom) isn't fixed until I scroll.

$(window).resize() didn't work in that case.

Has anybody another suggestion to calculate my limit?

Here is a better view on the problem: http://goo.gl/8hrzY

That problem is drivin me nuts.

I would be the happiest man on earth if anybody has a solution!!!

Cheers,

haurg

[bigspotteddog]

Kind of sporadically getting back to this. The first thing I noticed is that the bottom option does not accept a function, only a value. That is probably one source of the frustration. I would have to look into what it would take to make that option take a function as well as a value and how the plugin should react to that. In the meantime, the bottom option needs to be a value. That value can be determined by a function, but it needs to be a value; and, at present, there is no way to change that value dynamically. Once you call scrollToFixed with the bottom option, there is where it will stay. Hope that helps clear things up a little bit. Best of luck and I will have a deeper look as I have a chance. Thanks for your patience.