0

I want to stick a div on top when scrolling the window.

Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.

<body>

 <!-- Header and Nav -->
 <nav id="nav" class="top-bar">
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1>
          <a href="#">
            Foundation Magellan
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Sitemap</span></a></li>
    </ul>


   <section class="top-bar-section">
      <!-- Left Nav Section -->
      <ul class="left">
        <li class="divider"></li>

        <li  class="active" ><a href="#">Item1</a></li>
      </ul>

      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li><a href="#">Login</a></li>
     </ul>
    </section>
  </nav>
  <!-- End Header and Nav -->

    <!-- Main Feed -->

    <div data-magellan-expedition="fixed" >
        <div id="calendar" class="row">
            <dl id="calendar-per-day" class="sub-nav">
                <script>
                                 someCodeToCreateCalendar();
                </script>
            </dl>
            <hr>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <div id="baidumap"
                    style="height:300px; overflow: hidden; margin: 0;"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="large-9 columns">
                    <p>
               very long content can be scrolled............
                    </p>

        </div>
        <div class="large-3 columns">
            <div class="row">
                <div class="large-11 large-centered columns">
                    <h4>Right side content</h4>
                </div>
            </div>
        </div>
    </div>



  <!-- Footer -->

  <footer id="footer" class="row">
    <div class="large-12 columns">
      <hr />
      <div class="row">
        <div class="large-5 columns">
          <p>&copy; 2013 All Rights Reserved</p>
        </div>
        <div class="large-7 columns">
            <ul class="inline-list right">
                <li><a href="#">About</a></li>
            </ul>
        </div>
      </div>
    </div>
  </footer>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>

</body>
</html>

There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?

Kane
  • 8,035
  • 7
  • 46
  • 75
  • You can't expect us to wade through that and tell you what's wrong. You need to give us an excerpt we can debug, and you need to put it in the question. Not to mention give us the errors you're getting. – Daedalus Dec 07 '13 at 08:39
  • Just set your calendar and map css position: fixed and top: 0; – Hardy Dec 07 '13 at 08:43
  • @Hardy, those css style can't work with Foundation framework. – Kane Dec 07 '13 at 15:04

1 Answers1

0

Use CSS 

.div-to-stick {
      postion:fixed;
}

This will stick it to the top of the page on scroll.

Edd Aslin
  • 294
  • 4
  • 11
  • It does not work. I also tried the answers in [this question](http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to), they don't work as well. I think Foundation's css changes some behavior, those common solutions need be revised for Foundation framework. :( – Kane Dec 07 '13 at 14:50
  • It may be that foundations CSS is overwriting your own. Have you tried putting the div outside of foundations grid? So either at the very start or at the very end of the file either just after or before ? – Edd Aslin Dec 07 '13 at 22:39