水平滚动，检测相对于锚点的滚动位置

Question

好的，我正在为摄影师建立一个水平卷轴网站。我们已经完成了一些非常好的线框，并且我希望创建一个整洁的效果，它可以随时突出显示屏幕左侧的特定照片，或者更具体地说，将所有其他照片的透明度设置为40％。

所以我知道我可以为每张照片添加锚点，这样我就可以使用它来点击下一个选项，但是如果用户手动使用滚动条，我有什么方法可以检测相对于每个的位置照片。即使每张照片都是相同的高度，它们也可以使它更加笨拙，但它们可以有不同的宽度。

我在想是否有办法获得每个锚标记的位置，然后我可以检测当前位置，并使用一些数学来确定哪一个是焦点。

有人可以告诉我这是否可能，如果是这样的话怎么样？当然，欢迎使其成功的任何其他想法。

Answer 1

我为此编写了一个脚本，并提出了一个脚本，其中的项目不透明度是从它们的左侧离开多远。所以项目越近，它变得越明显。

您可以在此处查看演示： http://jsfiddle.net/XAa3Y/57/

希望它有所帮助。

Answer 2

您可以使用水平滚动支持修改（或更好地，改进）waypoints。 这看起来并不像我看到的那么难。

Answer 3

你必须综合两个数字。

a - 您可以使用

找到滚动的位置

 oDiv.scrollLeft

b - 一旦图片被加载 - 您可以将图片的大小相加（或者如果您手动设置它们 - 您甚至不必等待它们加载。

oImg.style.width

假设你在图片之间给出相同的间距 - 数学变得明显。

这是一个小小的JavaScript，这就是全部：）

Answer 4

这样的事情：http://jsfiddle.net/coltrane/Mj6ce/

在那个例子中，我使用了jQuery - 只是因为它对跨浏览器的兼容性有很大帮助 - 但如果你需要的话，你可以轻松地重新构建它而不是jQuery。

基本理念是：

1. 滚动条div提供滚动（通过overflow-x: auto;），它有一个包含所有其他内容项的直接子div。
2. jQuery function offset()用于比较滚动条的左边缘和内容div的左边缘（使用文档坐标）。这告诉我们滚动滚动条的程度。
3. 然后我们可以按顺序遍历所有项目，并检查每个项目在内容div中的位置（使用jQuery's position() function）。将项目的位置与当前滚动值（从步骤2）进行比较，我们可以确定是否突出显示该项目。
4. 最后，我们使用scroll事件，每次滚动更改时触发更新。我们的更新功能仅适用于步骤2和步骤2。如上所述的图3我使用jQuery's .scroll() function来绑定滚动事件。

Answer 5

该任务涉及检测图像位置，滚动位置以及了解图像宽度。使用jQuery，您需要使用scrollLeft()，position()，width()和scroll()事件

这是你如何做到的。

var $div = $('div'),
    divleft = $div.position().left;
$('div').scroll(function() {
    $('img').each(function() {
        img = $(this);
        imgleft = img.position().left;
        if (imgleft > divleft && imgleft + img.width() < divleft + $div.width()) {
            $(this).css({
                opacity: '1'
            })
        } else {
            $(this).css({
                opacity: '0.2'
            })
        }
    });
})

检查http://jsfiddle.net/Vy33z/4/

处的示例

Answer 6

尝试使用jQuery＆＃39; scroll事件支持。

http://api.jquery.com/scroll/

并检查屏幕上的图像是什么 - 类似于：

Check if element is visible after scrolling