Menu icon Foundation
F6: Magellan offset issue with Angular2

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:

- Header with image => 400px height
- Navigation
- Content

<div class="row">
    <div class="columns">
		<header>
			<header-image title="Dummy title" class="hide-for-small-only">
				<div style="height: 400px;" class="headerImageContainer">
					<div class="headerImage">
						<div class="imageOverlay"></div>
					</div>
					<div class="titleOverlay verticallyCentered">
						<p class="verticallyCentered">
							Dummy title
						</p>
					</div>
				</div>
			</header-image>
			<div class="show-for-small-only smallDeviceTitle">
				<p class="verticallyCentered">Dummy title</p>
			</div>
			
			<navigation>
				<h1 id="topHeadline">Top Headline</h1> <!-- Debug code -->

				<div id="magellanContainer" data-sticky-container>
					<div
						class="sticky"
						id="example"
						data-sticky
						data-margin-top="0"
						style="width:100%;"
						data-margin-bottom="0"
						data-top-anchor="bottomHeadline"
						data-btm-anchor="magellan-destroy:bottom"
					>
						<nav data-magellan>
							<ul class="horizontal menu expanded">
								<li><a href="#first">First Arrival</a></li>
								<li><a href="#second">Second Arrival</a></li>
								<li><a href="#third">Third Arrival</a></li>
							</ul>
						</nav>
					</div>
				</div>


				<h1 id="bottomHeadline">Bottom Headline</h1> <!-- Debug code -->
			</navigation>
		</header>
	</div>
</div>
<div class="row">
	<div class="columns">
		<router-outlet></router-outlet> <!-- Content -->
	</div>
</div>
<div id="magellan-destroy"></div>

So let's recap:
- The <header-image> with a 400px height is inside the <header>
- The <navigation> is inside the <header> and got rendered below <header-image>

Now my problem:
The navigation does not start to get fixed when #bottomHeadline reaches the top of the page (Offset would be 400px of the <header-image>
and 95px of the first <h1> and the magellan bar inside the <navigation> directive, so 495px) but at a scrolled amount of 95px (The height of the first <h1> and the magellan bar inside the <navigation> directive). So the magellan action is triggered if i currently scroll over the <header-image> element.

So it seems that the calculated anchor offset is limited to the <navigation> directive and not to the entire visible page.

I hope that my description is clear enough, otherwise please let me know.

I also hope anyone got an idea on this issue.

Thank you in advance,

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:

- Header with image => 400px height
- Navigation
- Content

<div class="row">
    <div class="columns">
		<header>
			<header-image title="Dummy title" class="hide-for-small-only">
				<div style="height: 400px;" class="headerImageContainer">
					<div class="headerImage">
						<div class="imageOverlay"></div>
					</div>
					<div class="titleOverlay verticallyCentered">
						<p class="verticallyCentered">
							Dummy title
						</p>
					</div>
				</div>
			</header-image>
			<div class="show-for-small-only smallDeviceTitle">
				<p class="verticallyCentered">Dummy title</p>
			</div>
			
			<navigation>
				<h1 id="topHeadline">Top Headline</h1> <!-- Debug code -->

				<div id="magellanContainer" data-sticky-container>
					<div
						class="sticky"
						id="example"
						data-sticky
						data-margin-top="0"
						style="width:100%;"
						data-margin-bottom="0"
						data-top-anchor="bottomHeadline"
						data-btm-anchor="magellan-destroy:bottom"
					>
						<nav data-magellan>
							<ul class="horizontal menu expanded">
								<li><a href="#first">First Arrival</a></li>
								<li><a href="#second">Second Arrival</a></li>
								<li><a href="#third">Third Arrival</a></li>
							</ul>
						</nav>
					</div>
				</div>


				<h1 id="bottomHeadline">Bottom Headline</h1> <!-- Debug code -->
			</navigation>
		</header>
	</div>
</div>
<div class="row">
	<div class="columns">
		<router-outlet></router-outlet> <!-- Content -->
	</div>
</div>
<div id="magellan-destroy"></div>

So let's recap:
- The <header-image> with a 400px height is inside the <header>
- The <navigation> is inside the <header> and got rendered below <header-image>

Now my problem:
The navigation does not start to get fixed when #bottomHeadline reaches the top of the page (Offset would be 400px of the <header-image>
and 95px of the first <h1> and the magellan bar inside the <navigation> directive, so 495px) but at a scrolled amount of 95px (The height of the first <h1> and the magellan bar inside the <navigation> directive). So the magellan action is triggered if i currently scroll over the <header-image> element.

So it seems that the calculated anchor offset is limited to the <navigation> directive and not to the entire visible page.

I hope that my description is clear enough, otherwise please let me know.

I also hope anyone got an idea on this issue.

Thank you in advance,

Julian

Rafi Benkual almost 4 years ago

Instead of offset, have you tried the anchor feature?

So in this example I used a data-top-anchor="upload-header:bottom" to anchor the element with an id of upload-header. Then you choose bottom. The sticky plugin can then calculate the position and height of upload-header and pin to the bottom of that.

<div class="sign-up-callout sticky is-anchored is-at-top" data-sticky="qh47ia-sticky" data-options="marginTop:0; marginBottom:0;" data-top-anchor="upload-header:bottom" data-btm-anchor="stop-sticky">
  nav content
</div>

Julian almost 4 years ago

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

Attila Vastag about 3 years ago

HI

 

How did u manage to run Foundation6 with Angular2?

When I include foundation.js in the project, it stops working?!

 

thnx