Question

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

我已经看过很多可能的解决方案，但没有任何效果。有人有主意吗？？？

Answer 1

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

将您希望加载到每个＆＃34; if statments＆＃34;更改导航图像并使用.scrollTop()编号来实现所需效果。

.scroll() event

.scrollTop()

我无法在工作中访问jsbin等，但我在代码段功能中测试了以下内容。只需确保页面实际滚动以测试它。

＆＃13;

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

＆＃13;

#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;

＆＃13;

<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>

＆＃13;

Answer 2

好吧所以我找到了我正在寻找的答案，我现在感觉很糟糕，但唯一认为错误的是我的文件路径。 IDK为什么会解决它。

无法找到解决方案：根据页面位置将图像加载到div

2 个答案: