перемещение div при необходимости

Question

Я хочу переместить div вверх/вниз по другому div. Так же, как Новости и события DIV в сайте neduet (экран ниже) Я искал в Интернете и нашел некоторые хорошие ссылки here и here но вопрос, если я нажимаю вверх вверх вверх она идет вверх и исчезает в какой-то момент.
то, что я хочу, когда я нажимаю или нажимаю кнопку, он проверяет позицию div. если div спрятан, тогда он должен двигаться вверх, иначе действие не должно выполняться. Хорошим примером этого является ссылка neduet.

Edit: Я новичок в 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); 
});