如何检查子div的底部接触父底部

【问题标题】：How to check bottom of child div touching parent bottom如何检查子div的底部接触父底部
【发布时间】：2016-02-23 11:21:20
【问题描述】：

我正在尝试使用范围输入更改子元素的位置（根据文本具有不同的高度），一旦子 div 触及具有固定高度的父元素的底部，我想停止应用顶部位置。

$('#change_position').on('input', function () {
    var val = +$(this).val(),
        ScrSize = parseInt($('.screen').css('height')), 
        Stop = $('.screentip').offset().top, 
        h = parseInt($('.screentip').css('height')), 
        tofsset = Stop - h;

    if (tofsset < ScrSize) {
        $('.screentip').css('top', val + "%");
    }
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您期望 jQuery 返回的高度实际上是一个以“px”结尾的字符串。您可以使用函数 .height()。这会将元素的高度作为整数返回。我已经尝试了您的代码的略微修改版本：

$('#input').on('input', function () {
    var val = parseInt($(this).val()),
        ScrSize = parseInt($('#container').height()),
        TxtSize = parseInt($("#text").height()), 
        Stop = ScrSize - TxtSize,
        valInPixel = ScrSize * val / 100;

    if (valInPixel < Stop) {
        $('#text').css('top', val + "%");
    }
    else
    {
      $("#text").css("top", Stop + "px");
    }
});

如果数字超出框架，else 部分会将您的元素定位到底部。您可能还必须注意填充和边距。这也可能导致定位错误。

希望这会有所帮助。

【讨论】：