8

Trying to create a menu that is sticked to the top of site whole time. Followed docs of zurb.foundation, but .sticky behaves always the same unexpected way. Or maybe I don't get some obvious?

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

If site is scrolled down, and hit the exactly height of initial viewport, sticky plugin is changing the element .sticky from is-stuck is-at-top to: .is-anchored .is-at-bottom so .sticky disappear.

Thank you.

UPDATE The first part from documentation: foundation.zurb.com/sites/docs/sticky.html explains the described behaviour. Because of default body { height: 100% } css, the body is interpreted exactly with max. height of viewport.

So in my case solution is a) override height of body with auto. But better b) Just avoid to use the sticky functionality for intended fixed header.

Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
Herr_Hansen
  • 2,292
  • 1
  • 20
  • 17
  • 1
    What version of Foundation 6 are you using? – Colin Marshall Jan 05 '16 at 16:25
  • Created with Yeti Launch, for sites – Basic. Readme says: # [Foundation for Sites](http://foundation.zurb.com) (v6.0) – Herr_Hansen Jan 06 '16 at 09:05
  • Update to Foundation to 6.1.1 and try again. Lots of bugfixes have been implemented since 6.0. To update, go into your project's root directory and run `bower update`. – Colin Marshall Jan 08 '16 at 04:35
  • It don't seems to be a bug-think. It seems a conceptual think. The part from documentation: _http://foundation.zurb.com/sites/docs/sticky.html_ looks like my described behaviour is intended by foundation. Because of default `body { height: 100% }` css, the body is interpreted exactly with max. height of viewport. – Herr_Hansen Jan 08 '16 at 15:28
  • 1
    It's a bug, see the [6.1.1 Release Notes](https://github.com/zurb/foundation-sites/releases/tag/v6.1.1). **"Fixed an issue with Sticky where calling data-sticky with no anchor points would cause it to remain sticky only for the height of the view, not the height of the document."** – Colin Marshall Jan 08 '16 at 20:42
  • 1
    Thx, but now with foundation 6.1.1. problem still exists. Very frustrating step into foundation. Guess I will use other frameworks for less struggle with ordinary thinks like an sticky nav-bar. – Herr_Hansen Jan 09 '16 at 09:59
  • Rather than give up on Foundation, [open an issue on Github](https://github.com/zurb/foundation-sites/issues/new). They fix stuff pretty fast. – Colin Marshall Jan 12 '16 at 04:00
  • Does this work properly in 6.2.4 yet? I still seem to be getting this issue in 6.2.3. – gla3dr Nov 23 '16 at 19:40

1 Answers1

7

I set the data-check-every plugin option to 0 to recalc every scroll event. Now the viewport's height is calculated again when content is loaded dynamically, such as when infinite scroll is used.

cometton
  • 163
  • 1
  • 8
  • I was facing a similar issue with an infinitely scrolling list. Setting the data-check-every="0" attribute seems to have fixed the problem. http://foundation.zurb.com/sites/docs/sticky.html#js-options.html#js-options – mpwhitt Apr 25 '17 at 20:56