有一个div移动(动态)CSS或JS？

mklgxw1f 于 2022-12-05 发布在其他

关注(0)|答案(3)|浏览(171)

css是否可以在用户滚动时让div随屏幕移动（例如固定），但如果它碰到另一个则停止，如果用户继续滚动则跳过它。
为了使它变得更容易想象...例如，如果你有3个带有大量文本的div，当用户向前阅读时，我有没有可能让div跳到每个div下面的插槽中？

css

来源：https://stackoverflow.com/questions/9011002/have-a-div-moving-dynamicly-with-css-or-js

3条答案

按热度按时间

of1yzvn41#

我建议您使用https://github.com/brandonaaron/jquery-overlaps，然后执行类似下面的操作来插入移动的div：

$(window).scroll(function() {
    var movingDiv = $('.moving-div');

    if (movingDiv.overlaps('.static-div') 
            && !movingDiv.hasClass('slotted')) {
        $('.static-div').before(movingDiv);
        movingDiv.css('position', 'static');
        movingDiv.addClass('slotted');
    }
});

这段代码只是一个提示，您还需要绑定一个函数来“unslotting”移动的div。

赞(0）回复(0）举报 2022-12-05

42fyovps2#

使数学使用一个透明的虚拟对象，有相同的属性比固定的。

$(window).scroll(function(){
    var b1_fo = $("#dummy").offset().top + $("#dummy").height();
    var b2_fo = $("#b2").offset().top + $("#b2").height();
    if( b1_fo > $("#b2").offset().top && b1_fo < b2_fo + $("#dummy").height()){
        $("#b1").css({top:$("#b2").offset().top - $("#b2").height(),position:'absolute'})
    } else {
        $("#b1").removeAttr('style')
    }
})

工作示例：http://jsfiddle.net/LpULy/

赞(0）回复(0）举报 2022-12-05

egmofgnx3#

我建议您使用https://github.com/brandonaaron/jquery-overlaps，然后执行类似下面的操作来插入移动的div：
这段代码只是一个提示，您还需要绑定一个函数来“unslotting”移动的div。
我希望这对你有帮助谢谢

赞(0）回复(0）举报 2022-12-05