Question

我正在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'放在第一个位置，我不知道如何实现这个目标。

Answer 1

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

我建议您使用jQuery.prevAll（）在单击<li>之前检索元素并将其移动到DOM中。

此处的示例，没有动画：http://jsfiddle.net/C9LNf/

因此，您的具体需求仍然存在问题。如果我说得对，那么只有当它离开容器时才想移动<li>。

我根本不知道如何做到这一点。您可以在<li> css属性上观察并检测左侧位置是否太左，但是没有本机jQuery函数来实现此目的。有一些超时的想法here，但我认为它就像推土机你的小问题。

另一种方法可能是将动画分成多个，每个li。你动画整个事物，你在DOM中移动元素，然后你做下一个动画。

Answer 2

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

例如：

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

那种东西。至于你问题的第一部分，你需要比较一些立场。如果元素是可滚动的，则它具有scrollTop属性和scrollHeight属性。这是元素的全部内容高度，直到它滚动到最后。不同于身高属性。因此，您需要比较您跟踪的元素何时位于高于高度的位置，但小于滚动高度。这意味着它不在视野范围内。如果你需要一个例子，进一步解释这一点，请告诉我，我可以为你发布一个jFiddle。希望这会有所帮助。

div视口中的元素

2 个答案: