更高分辨率的问题

followTo issue with higher resolutions

本文关键字：问题 高分辨率      更新时间：2023-09-26

我使用这个代码片段使一个元素在滚动时在某一点"停止"。

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);
    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};
$('#braille').followTo(865);

问题是，如果没有足够的空间来滚动(在更高的分辨率下)，它的位置就不正确。

要了解它的工作原理，观看这两个视频是很重要的。

1920 x1080: https://www.youtube.com/watch?v=WjT8FKAKTxA位置正确

2775 x1514: https://www.youtube.com/watch?v=oqQXm8BsfYA而这里，你可以看到它不在正确的位置因为没有足够的空间来滚动

分辨率直到大约1190px高度是ok的，更高的分辨率有这个问题。

我该如何解决这个…?我可以设置从页面底部开始的followTo吗?还是用百分比?或者写"if height> than 1190 "....

这里是实时网页。要想了解我所说的内容，只需将浏览器分辨率缩小3倍，然后滚动页面。盲文图片没有正确定位在曲谱下方和黄色段落上方。

简短的答案是肯定的，您可以使用$(document).height() - pos设置followTo相对于页面底部。基本原则是:

$(window).scrollTop() == $(document).height() - $(window).height()

将followTo更改为相对于页面底部工作:

if ($(document).height() - $window.height() - $window.scrollTop() < pos)

要使用百分比，可以这样计算:

var percentageDownPage = $window.scrollTop() / ($(document).height() - $(window).height()) * 100;
if (percentageDownPage > pos) { /* your code*/ }
相关文章：