需要时移动 div

Posted 2023-05-08

【中文标题】需要时移动 div

【英文标题】：moving a div when required

【发布时间】：2013-05-31 15:04:16

【问题描述】：

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

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

【问题讨论】：

不看他们的代码，你认为这可以通过一个 div 来完成吗？有一个溢出，并控制溢出的滚动？我觉得我过去以这种方式做到了这一点。编辑：见***.com/questions/13362/…

您是否尝试过使用 offset()、position()、scrollTop() 等来检查您正在移动的 div 的位置？

检查div的位置是否会消失然后执行动作。

使用一个容器 div，您将允许您的 div 在其中移动。使用该容器来定义边界。禁用该容器外的 div 移动。

参考可以看这篇帖子***.com/questions/11970074/…

【参考方案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);
); 

【讨论】：

+1 您的示例看起来很完美。今晚晚些时候我会看到这个。谢谢

我也想要 1 个水平的。所以我努力了codepen.io/anon/pen/DipEG，但是如何在内容中添加水平而不是垂直的图像

好问题！一种方法是设置宽度，例如 1500px。但是可能有更好的方法...codepen.io/lukeocom/pen/Egfks

它在我的页面中不起作用，图像没有加载到内容 div 中，mouseOver 也不起作用。我是否需要为此使用任何 jquery 链接等。我的页面已经包含 1.9.1 和 1.3.2 的两个 jquery 链接。

只使用最新的jquery CDN，2.0.0。您只需要包含一个版本。访问 scriptsrc.net 或 developers.google。您需要将脚本包含在 $(document).ready(function());