滚动时更改固定图像 [英] Change fixed image when scrolling

问题描述

当我在3个特定的行上滚动时，我试图进行固定的图像更改.该图像是一部手机，其界面应与普通文字匹配，因为在我滚动新文字时会看到该文字，并且手机界面应相应更改！

我设法修改了我在另一个线程中找到的JSFiddle来解决一些文本Div的问题，但是我无法在网站上以URL为源图像的情况下实现它.

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

以下是在JSFiddle中可以完成技巧的JS:

$("#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！

解决方案

我更新了js小提琴，并添加了带有源代码的图像标签，并在div标签中添加了图像标签

<div id="c3" class="left"><img src="https://dummyimage.com/300x200/000/fff" style="width:100px"/></div>

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

这是您要的吗?

I'm trying to have a fixed image change when i scroll over 3 particular rows. The image is a phone with an interface which should match up with normal text, as i scroll new text is seen and the phones interface should change accordingly!

I managed to modify a JSFiddle that I found in another thread to do the trick with some text Div's but I can't seam to implement it on my site which have images with URLs as source.

Here's the JSFiddle: http://jsfiddle.net/dB7eF/25/

Here's the JS that seams to do the trick in 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();
  });
}

The site is built with Visual Composer so I would love the sources for the Images to be URLs instead of IDs as in the JSFiddle example!

解决方案

I updated the js fiddle and added image tags with source, adding an image tag within the div tags

<div id="c3" class="left"><img src="https://dummyimage.com/300x200/000/fff" style="width:100px"/></div>

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

is this what you were asking for?

这篇关于滚动时更改固定图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！