javascript - Show id when div is halfway up

Question

So I know how to actually get ids and classes and do the basics but I'm not sure how to do this: "When the user scrolls down, the title of the post that takes up half the screen should be shown."

The setup is supposed to look something like this... Any ideas?

Answer 1

你需要用JS，我用jQuery做了一个简单的原型

这一切都是关于监听scroll事件并处理元素从顶部的偏移量，您需要为高度添加一个简单的条件，但现在它工作正常

$(window).scroll(function(){
var scrolledTop = $(this).scrollTop(); 
    console.log(scrolledTop); 
    $(".blog").each(function(){
        if($(this).offset().top < scrolledTop)
        {
            $('#blogname').html($(this).html()); 
        }

    }); 
}); 

看看这个http://jsfiddle.net/GkrCU/2/

我希望这可以帮助:)

Answer 2

这是我的答案

 $(window).scroll(function () {
     var windowheight = $(this).scrollTop();
     $(".blog").each(function () {
         var sc = $(this).offset().top;
         var id = $(this).attr('id');



         if (sc < windowheight) {
             $("#blogname span").html(id)
         }
     });
 });

http://jsfiddle.net/GkrCU/1/