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();
   }
});

当用户向下滚动到该div时，淡入背景图像

2 个答案: