需要時移動div

Question

我想將div向上/向下移動到另一個div。 就像在neduet網站（下面的屏幕）中的News and events 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);
});