Question

我有一个在页面上按字母顺序排列的项目列表。我想在页面的侧面创建一个固定元素，显示您当前正在滚动的字母部分。

例如，如果您滚动浏览以字母“D＆＃”开头的项目，则固定的div将显示“D＆＃39;”。我一直试图用jQuery创建它，但一直觉得它很棘手。

每个部分都有班级卡容器＆＃39;和一个＆＃39; id＆＃39;对应当前的信件。

即

＆＃13;

<div id="a" class="card-container">
  ...
</div>
<div id="b" class="card-container">
  ...
</div>
<div id="c" class="card-container">
  ...
</div>
...

＆＃13;

知道我怎么能做到这一点吗？

修改

到目前为止，我有这个：

＆＃13;

$(window).scroll(function() {
  var winTop = $(this).scrollTop();
  var letters = $('.card-container');

  letters.each(function(section) {
    if($(this).position().top <= winTop) {
      console.log($(this).context.id);
      $('.letter-show h3').text($(this).context.id);
    }
  });
});

＆＃13;

所以这似乎有效，但我觉得它并不是很有效。有什么建议可以改进吗？

Answer 1

正如我在评论中所说的那样：你可以做很多事情来改进你的代码 - 最多只有几毫秒的增益。就像最小化DOM查找并在找到正确的元素时打破循环，丢弃jQuery等等......但我怀疑你是否注意到即使在你能找到的最慢的机器上也存在差异。

＆＃13;

var letters = $('.card-container');
var letterShow = $('.letter-show h3');
$(window).scroll(function() {
  var winTop = $(this).scrollTop();      
  letters.each(function(section) {
    if($(this).position().top <= winTop) {
      letterShow.text($(this).context.id);
    }
  });
});

＆＃13;

.card-container {height: 300px;border-top: 1px solid}
.letter-show {position: fixed}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="letter-show"><h3></h3></div>
<div id="a" class="card-container">
  ...
</div>
<div id="b" class="card-container">
  ...
</div>
<div id="c" class="card-container">
  ...
</div>
<div id="d" class="card-container">
  ...
</div>
<div id="e" class="card-container">
  ...
</div>

＆＃13;

Answer 2

这就是诀窍：

git clone https://github.com/craigambrose/craigambrose.github.com
cd craigambrose.github.com/
open blog/2012/03/04/upgrading-to-refinery-cms-2-dot-0/index.html

获取视图中当前元素的id

2 个答案: