javascript - 需要时移动 div

Question

我想将一个 div 向上/向下移动到另一个 div。就像网站neduet中的新闻和事件 div （屏幕下方）一样，我在网上搜索并在此处和此处找到了一些很好的链接，但问题是如果我向上单击它会上升并在某些时候消失。
我想要的是当我按下或悬停一个按钮时，它会检查 div 位置。如果 div 被隐藏，那么它应该向上移动，否则不应执行任何操作。neduet 的链接就是一个很好的例子。

编辑：我是新手javascript，jquery所以一个工作示例或链接可能会有所帮助。

Answer 1

我在数学方面不是最好的，但基本上你需要找出你的滚动内容移动了多少，并在它向上或向下移动太远时阻止它移动。我已经创建了与您可能想要实现的目标类似的东西，这里是http://codepen.io/lukeocom/pen/nHuri

我得到容器的高度和内容的高度，然后检查内容滚动的量减去容器的高度，是否小于内容的高度。这对我数学弱的大脑来说非常混乱，但也许你可以想出一个更简单的方法。无论如何，我的例子有效。

您需要注意滚动内容的程度、动画完成的速度以及触发间隔的频率。

我将尝试清理工作代码示例，但在这里......

var scrollamnt = 0, timer, $content = $('#content');
var theoff, scroll = true;

var sHeight = $content.height(), 
    cHeight = $('#scrollC').height(),
    oHeight;

$('#up, #down').bind('mouseover', function() {
    $this = $(this).attr('id');

    timer = setInterval(function() {
        theoff = $content.offset();      
        oHeight = (-theoff.top + cHeight);


      if ($this === 'down' && (oHeight < sHeight)) {
            scrollamnt -= 10;
            scroll = true;
        } else if ($this === 'up' && scrollamnt < 0) {
            scrollamnt += 10;
            scroll = true;
        } else
            scroll = false;

        if (scroll) {
            $content.animate({
                'margin-top' : scrollamnt
            }, 0, 'linear');
            //end animate
        }//end if
    }, 10);
    //end interval*/

}).bind('mouseout', function() {
    clearInterval(timer);
});