我想将一个 div 向上/向下移动到另一个 div 上。就像网站中的新闻和活动 div neduet(屏幕下方)
我搜索了网络并发现了一些很好的链接这里和这里但问题是如果我点击向上它会上升并在某个时刻消失。
我想要的是当我按下或悬停按钮时,它会检查 div 位置。如果 div 被隐藏,那么它应该向上移动,否则不应该执行任何操作。 neduet 的链接就是一个很好的例子。
编辑: 我是
javascript
和
jquery
的新手,因此工作示例或链接可能会有所帮助。
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);
});