在需要时移动div

Question

我想向另一个div上移/下移div。就像网站neduet中的新闻和事件div一样（下面的屏幕） 我在网上搜索了一些很好的链接 here 和 here 但是问题是，如果我点击它，它会上升并在某些时候消失。
我想要的是当我按下或悬停按钮时，它会检查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);
});