Question

我试图使用范围输入来改变子元素的位置（基于文本的高度不同），一旦子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 + "%");
    }
});

Answer 1

你期望jQuery返回的高度实际上是一个带有结尾＆＃34; px＆＃34;的字符串。您可以使用.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部分会将元素定位到底部。您可能还需要注意填充和边距。这也可能导致错位。

希望这有帮助。

如何检查触摸父母底部的孩子底部

1 个答案: