Foundation-
3Replies
-
F6: Magellan offset issue with Angular2
By Julian
angular2foundation6Magellanstickynavnavigationoffset
Hi, i'm going to combine Foundation 6 with an Angular2 site. Now i'm stuck with Foundation's Magellan feature. I've created a directive containing the site navigation, which should be stuck at the top while scrolling. The structure is as follows:... (continued)
Last Reply by Attila Vastag about 3 years ago
You commented on
Julian's post
almost 4 years
Hi,
i think i caused a little bit of confusion. I'm already using the anchor property, not the offset.
Let me explain it a little more detailed:
Between the navigation bar and the top of the page there are 495px distance. 400px goes to the header image above the navigation bar and another 95px to elements between the header image and the navigation bar.
Now i start scrolling and when i've scrolled 95px, the navigation bar begins to stick at the top, so it switches just inside the header image.
So my conclusion is that Foundation, more precisely the Foundation JS, is restricted to the <navigation> element and can't look at the <header-image> element.
I hope this explanation is clear enough :)
Thanks, Julian
You commented on
Jan's post
almost 4 years
Hi,
try adding
HTML
<div id="destroy"></div>
at the very end of your
HTML
<body>
Edit: Sry, i was in a hurry and the HTML tags got stripped ;)
-
No Content
-
No Content
Hi,
i think i caused a little bit of confusion. I'm already using the anchor property, not the offset.
Let me explain it a little more detailed:
Between the navigation bar and the top of the page there are 495px distance. 400px goes to the header image above the navigation bar and another 95px to elements between the header image and the navigation bar.
Now i start scrolling and when i've scrolled 95px, the navigation bar begins to stick at the top, so it switches just inside the header image.
So my conclusion is that Foundation, more precisely the Foundation JS, is restricted to the <navigation> element and can't look at the <header-image> element.
I hope this explanation is clear enough :)
Thanks, Julian