Question

当用户滚动时，css是否可以在屏幕上移动div（例如固定）但是如果它击中另一个并且如果用户进一步滚动则跳过它就会停止。

让它可以想象...... 例如，如果您有3个带有大量文本的div，那么当用户向前读取时，我可能会将div跳入其中的每个插槽中吗？

Answer 1

我建议您使用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');
    }
});

代码只是一个提示，你还需要绑定一个函数来“取消”移动div。

Answer 2

使用具有与固定对象相同属性的透明虚拟对象进行数学运算。

$(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/

使用CSS或JS移动（动态）div？

2 个答案: