Zurb Foundation 6 - the status of the sticky switch at the end of the viewport height. ".is-anchored.is-at-bottom"

Trying to create a menu that will be attached to the top of the site all the time. Subsequent documents zurb.foundation, but .sticky always behaves as unexpectedly. Or maybe I won’t get any obvious?

Please check here: http://codepen.io/mister-hansen/pen/wMgrPm

If the site scrolls down and reaches exactly the height of the original viewport , the sticky plugin changes the .sticky element from is-stuck is-at-top to: .is-anchored .is-at-bottom , so .sticky disappears.

Thanks.

UPDATE The first part of the documentation: foundation.zurb.com/sites/docs/sticky.html explains the described behavior. Due to the default body {height: 100%} css, the body is interpreted exactly with max. viewing window height.

So, in my case, the solution: a) redefines the height of the body from the car. But better b) Just avoid using sticky functionality for the intended fixed header.

+6
source share
1 answer

I set the Data Validation Each Plugin option to 0 to recount every scroll event. Now the height of the viewport is calculated again when the content is loaded dynamically, for example, when infinite scrolling is used.

+4
source

All Articles