javascript - 找不到解决方案 : load images to div based on page location

Question

所以我需要一个问题的解决方案，我有一个导航栏，在那个导航栏的最右边有一个 div (A)，它留在一个地方，因为导航固定在顶部。在页面的正文中，有 6 个部分是 1200 像素高的 div，当用户从一个部分向下滚动到另一个部分时，我想将不同的图像加载到相关的 div (A)。

我已经研究了大量可能的解决方案，但没有任何效果。有人有主意吗？？？

Answer 1

根据您尝试放入每个 div 的来源，您可以在 jQuery 中使用 .scrollTop() 来实现该效果。从 .scrollTop() 返回的值为 x 后，更改 div 的 src 属性。

将您想要加载的任何源放入您的每个“if 语句”以更改您的导航图像并使用 .scrollTop() 数字来实现所需的效果。

.scroll() event

.scrollTop()

我在工作中无法访问 jsbin 或类似的东西，但我在代码片段功能中测试了以下内容。只需确保页面实际滚动即可对其进行测试。

$(function() {
  $(document).scroll(function () {
    var top = $(window).scrollTop();
    $('#navImg').html(top);
    if (top > 100) {
       $('#botImg').attr('src', 'http://animalia-life.com/data_images/dog/dog1.jpg');
    }
    if (top < 100) {
       $('#botImg').attr('src', 'http://davidfeldmanshow.com/wp-content/uploads/2014/01/dogs-wallpaper.jpg');
    }
  })
});

#nav {
  background: black;
  height: 100px;
  width:100%;
  }

#navImg {
  height:30px;
  width: 30px;
  top:15px;
  left:15px;
  position:fixed;
  background:green;
  }

#bottom {
  position:absolute;
  top:200px;
  height:1200px;
  width:200px;
  background:blue;
  }

#botImg {
  height: 100px;
  width:100px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='nav'><div id='navImg'></div></div>

<div id='bottom'><img id='botImg' src='http://davidfeldmanshow.com/wp-content/uploads/2014/01/dogs-wallpaper.jpg' /></div>