固定/滚动分区

Question

我正在试图弄清楚如何设置一些章节标题以保持固定，但在用户到达下一个标题时向上滚动页面。示例：http://www.codeandtheory.com/about-us。

我的标记：

<div class="section-title"><div class="section-bar"></div>
 <a href="#collections"><p class="section-title">Collections Management</p></a>
</div>

我的CSS：

.section-title {
    width: 270px;
    font-size: 30px;
    line-height: 38px;
    color: #f18a21;
    text-transform: uppercase;
    position: fixed;
    float: left;
    display: block;
}

测试链接：http://api.mtscollective.com

这可以在纯CSS中完成，还是需要JS？

谢谢！

Answer 1

Js是必需的！

尝试相同的

<强>的jQuery

<script>     
$(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
          $('.section-title').addClass('fixed');
      } else {
          $('.section-title').removeClass('fixed');
      }
  });
</script>

和 CSS：

.fixed {position:fixed; top:0; left:0;}