Question

I am using JQueryUI : content via AJAX and have linked to lengthy pages, with #tabs’s div height set to 800px. Yet pages overflow, so I put overflow-y to auto.

Now, tabs scroll with the content, I wish them to be sticky so as to only content scrolls and user sees them if he has scrolled down. I tried, but was unable to find as to how should I display data in certain div after pulling it from remote pages. Please guide.

I checked this (jQueryUI Tabs – Scroll content only) and this (jqueryui tabs : is it possible to keep the navigation tabs visible when content is scrolled vertically?) before creating this question, don’t find them relevant to my query.

Answer 1

Using CSS you can set the tabs to be fixed. Then set the content to have a margin-top.

Here is an example on jsFiddle