andriusvelykis / reflow-maven-skin

Reflow is an Apache Maven site skin built on Bootstrap. It allows various structural and stylistic customizations to create a modern-looking Maven-generated website.
http://andriusvelykis.github.io/reflow-maven-skin/
Apache License 2.0
132 stars 54 forks source link

TOC is hidden under navbar #1

Closed htfv closed 10 years ago

htfv commented 11 years ago

If the TOC is placed on the top (<toc>top</toc>) and I scroll a long page down, there is a point where TOC is hidden under the navbar.

It seems that TOC jumps to the fixed position when it reaches the top of the page, but it should do so when it reaches the navbar.

andriusvelykis commented 11 years ago

Thanks for the bug. You are right that ToC jumps to a fixed position, but on my computer, (Mac + Chrome 24), it does that when it reaches top navbar.

Do you have a screenshot or a reproducible example where this is happening? As I understand, the ToC hides under the navbar for you? Or overlays the navbar?

Can it be an issue with your browser - what are you using? Could you try reproducing with another browser?

htfv commented 11 years ago

Tested on in FF 18, Chrome 24, and IE 9 on Windows 7, all behave similar.

FF: http://clip2net.com/s/2MZNi Chrome: http://clip2net.com/s/2MZMC IE: http://clip2net.com/s/2MZM3

htfv commented 11 years ago

I found that this problem occurs when there is no banner.

andriusvelykis commented 10 years ago

Fixed in b5c8a1ad4375349b6d1ee9e49ebb146c19091976.

Added an offsetTop attribute to <toc> element, which allows controlling when should the ToC snap to top. It is hard calculating the correct snap point for different themes and components (e.g. banner, slogan and breadcrumbs being shown plus their contents - all affect the snapping point). Therefore this provides an option to indicate manually when to snap for your own website. To do this, use the new attribute, e.g.:

<toc offsetTop="200">top</toc>

Also adjusted the behaviour of ToC for smaller screen sizes. Now the ToC is static but collapsible for widths <980px.

Added documentation about the new feature to the website (available after 1.1.0 release).