使用jquery如何測試元素的底部是否與另一個元素的底部一致？

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

請致電getBoundingClientRect關於要比較的元素。該函數返回一個帶有屬性底部的對象，其中包含您正在搜索的信息。

瀏覽器支持看起來相當普遍。請確保您取消引用jquery對象，因爲getBoundingClientRect是一個dom函數。

Answer 2

不太清楚什麼是任務。也許這個片段給出提示或可以提供幫助。 我覺得這個方法完全忽略了瀏覽器的滾動行爲。

// 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');