Question

一些背景故事：这个网站有一个导航栏已经被推到了页面顶部，并允许用户访问页面的不同部分。目前正在使用jQuery和Materialize来创建它。

我正在尝试在网页的某个部分上的目录div上实现推针，以便向用户显示看起来像时间轴的内容。但是，当我滚动浏览部分时，我很难让pushpinned目录保留在视图上。当我将css设置为遵循物化文档时，目录在整个网页中被修复，因此它显示在一个完全不相关的部分。我也无法实现正确的JavaScript以便正确使用这个工具，而我主页中的导航栏更容易，因为它只是固定在整个页面的顶部。

// Class for when element is above threshold
.pin-top {
  position: relative;
}

// Class for when element is below threshold
.pin-bottom {
  position: relative;
}

// Class for when element is pinned
.pinned {
  position: fixed !important;
}

HTML（原谅格式不佳：/）

<div class="custom-parallax3">

<!--STORY-->
<div id="story" class="section scrollspy">
<div class="row">
    <h2 class="center-align" id="story_title" data-target="story_title" >STORIES</h2>
  <div id="stories" class="col s12 m9 110">
      <br><br>
      <div>a bunch of divs</div>
    </div>
<div id="stories_TOC" data-target="stories_TOC" class="col hide-on-small-only m3 l2 pushpin">
  <ul class="section table-of-contents">
    <li>a bunch of li's that link to divs</li>
  </ul>
</div>
</div>
</div>
</div>
</div>

CSS

#story {
  background:transparent;
  color: white;
  height: 100%;
}

#stories_TOC {
  position: relative;
}

.pin-top, .pin-bottom {
  position: relative;
}

.pinned {
  position: fixed !important;
}

如何使用Materialise

0 个答案: