Question

我想在滚动窗口时将div放在顶部。

看起来Magellan of Foundation提供了类似的行为。但是我希望将自定义元素（具有 data-magellan-expedition =“fixed” 的div）放在顶部而不是Magellan's example中的Sub-Nav

<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>

有full my code尝试我的想法。我希望滚动窗口时日历和地图始终贴在上面。但它根本不起作用。有人知道怎么做吗？

Answer 1

使用CSS

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

这将在滚动时将其粘贴到页面顶部。

使用Foundation时粘一个div

1 个答案: