div视口中的元素答案

【问题标题】：elements in viewport of divdiv视口中的元素
【发布时间】：2013-05-03 10:33:46
【问题描述】：

我正在 Jquery 中构建一个菜单（无序列表），单击该菜单会滚动到某个位置。我希望将移出视口的元素放在开头，因此菜单项始终可见。

我有一个菜单：

<div id="work_overview">
    <ul>
        <li><a href="link" class="imgs_work"><img /></a></li>
        <li><a href="link" class="imgs_work"><img /></a></li>
        ....
    </ul>
</div>

如果有移动菜单的脚本：

$('.imgs_work').click(function(){
    var pos = $(this).position('left');

    $('#work_overview ul').animate({ left:pos.left },1500);
});

我希望在离开视口时将“#work_overview ul li”放置在第一个位置，但我不知道如何实现。

【问题讨论】：

你能补充更多细节吗？ HTML，如果可能的话，还有一个 jsFiddle，因为我不理解你的问题！
我认为您必须将位置更改为相对而不是绝对
我已经更新了代码，希望它更有意义

标签： javascript jquery menu viewport

【解决方案1】：

好的，我明白了，所以再试一次：

我建议你使用 jQuery.prevAll() 来检索点击 <li> 之前的元素并将其移动到 DOM 中。

这里是一个例子，没有动画：http://jsfiddle.net/C9LNf/

因此，您的特定需求仍然存在问题。如果我没记错的话，您只想在 <li> 不在容器中时移动它。

我不知道如何简单地做到这一点。您可以查看<li> css 属性并检测左侧位置何时太左，但没有原生的 jQuery 函数来实现这一点。有一些关于超时的想法here，但我认为它就像一个推土机你的小问题。

另一种方法是将动画分成多个，每个 li 上。您为整个事物设置动画，在 DOM 中移动元素，然后执行下一个动画。

【讨论】：

嗯，这是非常有用的信息，非常感谢。我将再次尝试使用这些新信息。我在想，我可以在动画开始时启动一个自定义事件来检查“
”的位置，并通过回调动画函数来停止事件？

【解决方案2】：

最近在另一个讨论中部分回答了这个类似的问题。您需要做的是使用我将发布的方法，然后对其进行修改，以便在视图中的最后一个项目的索引离开视口时将其删除，然后使用 .prepend() 或插入它使用索引 1 处的索引函数进入 html。

例如：

var itemToMoveToPosition1 = $('item');
$('li:(0)').html(itemToMoveToPisition1);

类似的东西。至于你问题的第一部分，你需要比较一些位置。如果一个元素是可滚动的，它有一个 scrollTop 属性和一个 scrollHeight 属性。这是它在滚动到末尾之前所具有的元素的全部内容高度。与高度属性不同。因此，您需要比较您正在跟踪的元素何时位于大于高度但小于滚动高度的位置。这意味着它不在视线范围内。如果您需要一个示例来进一步解释这一点，请告诉我，我可以为您发布一个 jFiddle。希望这会有所帮助。

【讨论】：