Question

当我滚动3个特定行时，我试图修改图像。图像是一个带有接口的手机，应该与普通文本相匹配，因为我看到滚动的新文本，手机界面应该相应改变！

我设法修改了我在另一个线程中找到的JSFiddle以使用一些文本Div来解决问题，但我无法在我的网站上实现它，其中包含URL作为源的图像。 / p>

这里是JSFiddle：http://jsfiddle.net/dB7eF/25/

这是JS在JSFiddle中使用的技巧：

$("#image1").fadeIn(1000);
$(document).scroll(function() {
  var pos = $(document).scrollTop();
  if (pos < 200) {
    hideAll("image1");
    $("#image1").fadeIn(1000);
  }
  if (pos > 200 && pos < 600) {
    hideAll("image2");
    $("#image2").fadeIn(1000);
  }
    if (pos > 600 && pos < 1000) {
    hideAll("image3");
    $("#image3").fadeIn(1000);
  }
});

function hideAll(exceptMe) {
  $(".image").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}

该网站是使用Visual Composer构建的，所以我希望图像的来源是URL，而不是JSFiddle示例中的ID！

Answer 1

我更新了js小提琴并添加了带有source的图像标签，在div标签中添加了一个图像标签

<div class="nested-menu">
              <a class="list-group-item" (click)="addExpandClass('pages')">
                  <span><i class="fa fa-plus"></i> &nbsp; Menu</span>
              </a>
              <li class="nested" [ngClass]="{'expand' : showMenu === 'pages',  hidden: showMenu !== 'pages' }">
                  <ul class="submenu">
                      <li>
                          <a href><span>Submenu</span></a>
                      </li>
                      <li>
                          <a href><span>Submenu</span></a>
                      </li>
                  </ul>
              </li>
          </div>

http://jsfiddle.net/dB7eF/26/

这就是你要求的吗？

滚动时更改固定图像

1 个答案: