在标头中显示id属性

时间:2013-11-30 11:06:04

标签: javascript jquery html css

我有这个页面:

http://i.stack.imgur.com/AfPWJ.jpg

http://jsfiddle.net/fLGQJ/

我想在我滚动时捕捉到我在哪个div上。在标题中通过在标题

中显示id属性

类似的东西:

var a =   // the topmost div
( $(document).scrollTop() > $(a).position().top) {    
    console.log($(a).attr('id'))
}

我希望在标题

中显示div的id属性

我可以在没有插件的情况下实现这一目标,只需2-3行吗?甚至是插件(如果有的话)

这是html示例

  <div class="vs" id="Genesis 1:1">
    &nbsp;1 In the <a href="GenesisRef.html#Genesis%201">a</a>beginning <a href="GenesisRef.html#Genesis%202">b</a>God created the heaven and the earth.
  </div>

  <div class="vs" id="Genesis 1:2">
    &nbsp;2 And the earth was without form, and void; and darkness was upon the face of the deep. <a href="GenesisRef.html#Genesis%203">c</a>And the Spirit of God moved upon the face of the waters.
  </div>

  <div class="vs" id="Genesis 1:3">
    &nbsp;3 <a href="GenesisRef.html#Genesis%204">d</a>And God said, <a href="GenesisRef.html#Genesis%205">e</a>Let there be light: and there was light.
  </div>

  <div class="vs" id="Genesis 1:4">
    &nbsp;4 And God saw the light, that it was good: and God divided the light from the darkness.
  </div>

  <div class="vs" id="Genesis 1:5">
    &nbsp;5 And God called the light <a href="GenesisRef.html#Genesis%206">f</a>Day, and the darkness he called Night. And the evening and the morning were the first day.
  </div>

  <div class="vs" id="Genesis 1:6">

    &nbsp;6 And God said, <a href="GenesisRef.html#Genesis%207">g</a>Let there be a firmament in the midst of the waters, and let it divide the waters from the waters.
  </div>

  <div class="vs" id="Genesis 1:7">
    &nbsp;7 And God made the firmament, <a href="GenesisRef.html#Genesis%208">h</a>and divided the waters which were under the firmament from the waters which were <a href="GenesisRef.html#Genesis%209">i</a>above the firmament: and it was so.
  </div>

  <div class="vs" id="Genesis 1:8">

    &nbsp;8 And God called the firmament Heaven. And the evening and the morning were the second day.
  </div>

  <div class="vs" id="Genesis 1:9">
    &nbsp;9 And God said, <a href="GenesisRef.html#Genesis%2010">j</a>Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so.
  </div>

  <div class="vs" id="Genesis 1:10">
    &nbsp;10 And God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good.
  </div>

例如,如果div 5位于顶部,则应显示Genesis 1:5

3 个答案:

答案 0 :(得分:0)

我想你可能在寻找

a.appendTo("#Header-Div");

这将追求你的其他编码。并且只需将header-div替换为您希望它进入的框的id。

答案 1 :(得分:0)

这个怎么样:

if( $(document).scrollTop() > $(a).position().top) {    
$("#header").html(a.attr('id'));
}

答案 2 :(得分:0)

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).scroll(function() {

        var winTop = $(this).scrollTop();
        var divs = $('div');

        var top = $.grep(divs, function(item) {
            return $(item).position().top <= winTop;
        });


        //var id=$(top).first().attr('id');
        var ll=$(top);



    $(top).each(function(i, item) {
    var total=ll.length-1;

    if(total==i)
    {
    $("#finalvalue1").empty();
 document.title=$(item).attr("id");
}
});



    });

此代码对我有用,感谢大家的帮助:)