使用Foundation時粘貼div

Question

滾動窗口時，我想在頂部粘貼div。

看起來Foundation的Magellan提供了類似的行為。 但我想將我的自定義元素（屬性為data-magellan-expedition =“ fixed”的div）放在頂部，而不是在Magellan的示例中使用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>

我有完整的代碼來嘗試我的想法。 我希望日歷和地圖在滾動窗口時始終停留在頂部。 但這根本不起作用。 有人知道怎么做嗎？

Answer 1

使用CSS

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

這會將其粘貼到滾動頁面的頂部。

使用Foundation時粘貼div

問題描述

1 個解決方案

解決方案1
0 2013-12-07 11:12:51

使用Foundation時粘貼div

問題描述

1 個解決方案

解決方案1 0 2013-12-07 11:12:51

解決方案1
0 2013-12-07 11:12:51