Javascript div视口中的元素

Javascript div视口中的元素,javascript,jquery,menu,viewport,Javascript,Jquery,Menu,Viewport,我正在Jquery中构建一个菜单(无序列表),单击该菜单可以滚动到某个位置。我希望移出视口的元素放置在开始处,以便菜单项始终可见 我有菜单: <div id="work_overview"> <ul> <li><a href="link" class="imgs_work"><img /></a></li> <li><a href="link" class

我正在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>

我想在离开视口时将“#work_overview ul li”放在第一个位置,我不知道如何实现这一点。

好的,我明白了,再试试:

我建议您使用jQuery.prevAll()在单击
  • 之前检索元素并在DOM中移动它

    下面是一个没有动画的示例:

    因此,您的具体需求仍然存在问题。如果我没有弄错的话,您只想在
  • 移出容器时移动它

    我不知道如何简单地做到这一点。您可以查看
  • css属性并检测左侧位置是否过左,但没有本机jQuery函数来实现这一点。有一些关于暂停的想法,但我认为这就像一台推土机——你的小问题


    另一种方法可以是将动画拆分为多个动画,每个li打开。您可以为整个过程设置动画,在DOM中移动元素,然后进行下一个动画。

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

    例如:

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

    诸如此类的东西。至于问题的第一部分,你需要比较一些立场。如果元素是可滚动的,则它具有scrollTop属性和scrollHeight属性。这是滚动到末尾之前元素的完整内容高度。与“高度”属性不同。因此,您需要比较正在跟踪的元素位于大于高度但小于滚动高度的位置的时间。这意味着它是看不见的。如果你需要一个例子,这进一步解释了这一点,让我知道,我可以发布一个jFiddle给你。希望这能有所帮助。

    您能添加更多详细信息吗?HTML,如果可能的话,还有一个JSFIDLE,因为我不理解你的问题,仅仅是一些单词!我认为你必须将位置改为相对位置,而不是绝对位置。我已经更新了代码,希望它更合理。这是非常有用的信息,非常感谢。我会用这些新信息再次尝试。。我在想,我可以在animate start上启动一个自定义事件来检查“
  • ”的位置,并通过调用animate函数来停止事件?
    var itemToMoveToPosition1 = $('item');
    $('li:(0)').html(itemToMoveToPisition1);