代码的行为取决于屏幕大小

Question

我的jQuery出现了奇怪的行为，因为笔记本电脑的屏幕尺寸/分辨率比普通的PC屏幕要小。

我要做的是根据最适合的位置放置一个下拉列表：如果事件目标离窗口底部太近，则会在事件目标上方显示下拉列表，反之亦然。 / p>

如此处所示，如果离底部太近，则下拉菜单会显示在顶部：http://jsfiddle.net/u7n6tLgo/14/

在这里，如果太靠近顶部，则下拉菜单将显示在底部：http://jsfiddle.net/u7n6tLgo/15/

$(this).on("click", ".selector > *[data-action='open']", function(event) {
    const selector = $(this).parent(".selector");
    const container = selector.find(".container");
    const title = selector.find(".title");

    container.toggle();

    let windowHeight = $(window).height();
    let titleOffsetTop = title.offset().top;
    let titleHeight = title.height();
    let containerHeight = container.height();

    title.toggleClass("selected");

    if(windowHeight < (titleOffsetTop + titleHeight + containerHeight) && containerHeight < titleOffsetTop) {
        container.css("top", (-containerHeight-titleHeight));
    } else {
        container.css("top", 50);
    }
});

我使用的是15英寸笔记本电脑，对我而言，下拉菜单始终位于顶部，除非我将浏览器窗口缩小到<80％（显然，在私人项目中的小提琴之外；在小提琴中是我按我的一个朋友的要求在他的24英寸屏幕上尝试了该代码，在这里效果很好。

由于某种原因，title.offset().top大于1000，超过了我的朋友指出的奇怪的窗口高度。不知道这就是为什么这很奇怪。 HTML和CSS在摆弄。

为什么会这样？更重要的是，我该如何解决或解决它？

编辑：

<div class="selector">
    <div class="title" data-action="open">Open</div>
    <div class="container">
        <ul class="itemList">
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</div>