0

I was trying to adapt this example to my angular project. Here is a Plunkr link for my own adaptation, and the important code itself here:

I have no idea what am I missing or mistyped... Any help would be appreciated since it's already a week I am facing this issue and can't figure it out.

<div id="page">
  <header id="landing" class="header">
    <div class="medium-4 small-centered text-center columns">
      <h4 class="text-center">Expand your dimensions</h4>
      <a class="">Scroll to content</a>
    </div>
  </header>
  <div data-sticky-container id="navigation">
    <div data-sticky data-margin-top='0' data-top-anchor="landing:bottom" data-btm-anchor="page:bottom">
      <div class="top-bar">
        <div class="top-bar-left">
          <a href="#">
            <img src="http://placehold.it/150x38" alt="" />
          </a>
        </div>
        <div class="top-bar-right">
          <ul class="menu">
            <li><a href="#about">About me</a></li>
            <li><a href="#portfolios">Portfolio</a></li>
            <li><a href="#contact">Get in touch</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <br />
</div>

Thanks in advance.

CreativeZoller
  • 184
  • 1
  • 15
  • My answer over here might help : http://stackoverflow.com/questions/38409034/foundation-6-magellan-sticky-not-working-with-zurb-template-cli-install/38411825#38411825 – Hari Harker Jul 28 '16 at 16:19
  • Thanks @HariHarker but if you examine my linked plunkr, it's nearly the same what you posted. Every important attribute is on place in both examples, but for me somehow still not working. – CreativeZoller Jul 28 '16 at 21:19
  • It's not the same until you have the `
    ` as the root/parent for your topbar element. The `div` with `data-sticky-container` attribute should be placed **inside** it.
     – Hari Harker Jul 29 '16 at 10:32
  • Yes, well It just does not matter since as I already pointed out if I copy exactly the tried methods which are working into my angular project, it will just not working anymore. Your exact code included. – CreativeZoller Jul 30 '16 at 14:52
  • Anyhow... Foundation documentation is a little tricky and they left out some things... For example in their example they use both data-top-anchor and data-bottom-anchor attributes but I did not find any clue that we MUST use both of them at the same time for one anchor also. Since my point only the top anchor is important logically I wanted to use only that attribute... Nevertheless it's fixed but in angular somehow still not working and I have no clue... I also edited the quoted code part to be updated and plunkr link content updated as well. – CreativeZoller Jul 31 '16 at 16:20

0 Answers0