當用戶向下滾動到該div時淡入背景圖像

Question

我有一個具有黑色背景的div，並且僅當用戶向下滾動到該div的中間位置時，才想為該div動態添加/淡入背景圖像。

的HTML

div {
  background-color: #000;
  height: 500px;
  width: 500px;
}

JS（我真的不知道我在做什么。我已盡力而為。）

$(document).scroll(function(){
    var scrollTop = $("html").scrollTop();
    if(scrollTop > $(div).offset().top){
        $("div").css('background-image','url("img/background.jpg")').fadeIn();
    }
})

我在正確的軌道上嗎？

Answer 1

查看此插件： http : //www.appelsiini.net/projects/viewport

這樣的事情應該可以完成工作（未經測試）：

$(window).bind("scroll", function(event) {        
    $("div:in-viewport").each(function() {
      $(this).css('background-image','url("img/background.jpg")').fadeIn();
    });
});

Answer 2

嘗試這個

function isScrolledIntoView($elem) {
   var docViewTop = $(window).scrollTop();
   var docViewBottom = docViewTop + $(window).height();

   var elemTop = $elem.offset().top;
   var elemMiddle = elemTop + $elem.height()/2;
   return docViewBottom >= elemMiddle && docViewTop <= elemMiddle;
}
$(window).scroll(function(){
   $elem = $("div"); //or what element you like
   if(isScrolledIntoView($elem)){
      $elem.css('background-image','url("img/background.jpg")').fadeIn();
   }
});