Question

我有一个元素在滚动到某个位置时被修复，我希望元素在该元素的底部与另一个元素的底部齐平时变为静态。

所以基本上如何测试元素的底部是否与平行于固定元素的元素的底部齐平。

此代码处理固定元素，我只需要在var imgCon = $('#imageContent');的底部与var txtCon = $('#textContent');的底部齐平时将其关闭。

var imgCon = $('#imageContent');
var txtCon = $('#textContent');
var offset = txtCon.offset();
var txtCon = offset.top - 60;
var txtbottom = $('#textContent').position().top + $('#textContent').outerHeight(true);
if ($(this).scrollTop() >= txtCon) {
    imgCon.addClass('fixed');
    imgCon.removeClass('floatImage');
    var contentWth = $('#postContent').width();
    var number = contentWth * 0.35;
    imgCon.css('width', number);
    $(window).resize(_.debounce(function () {
        var contentWth = $('#postContent').width();
        var number = contentWth * 0.35;
        $('#imageContent').css('width', number);
    }, 10));
} else if ($(this).scrollTop() <= txtCon) {
    imgCon.removeClass('fixed');
    imgCon.addClass('floatImage');
}
//some magic that tests whether bottom is level with parallel container bottom
if (($(this).scrollTop()) >= txtbottom) {
    imgCon.removeClass('fixed');
}

Answer 1

不太确定这是什么任务。也许这个片段给出了提示或可以提供帮助。我认为这种方法完全忽略了浏览器的滚动行为。

// get value from 1. Element
offset = $('elem1').offset();
value1 = offset.top + $('elem1').height();

// get value from 2. Element
offset = $('elem2').offset();
value2 = offset.top + $('elem2').height();

// Compare
if(value1 == value2) alert('equal');

Answer 2

在要比较的元素上调用getBoundingClientRect。该函数返回一个属性为bottom的对象，其中包含您要搜索的信息。

浏览器支持似乎相当普遍。如果你使用这个库，请确保你取消引用一个jquery对象，因为getBoundingClientRect是一个dom函数。

使用jquery如何测试元素的底部是否与另一个元素的底部齐平？

2 个答案: