调整 scrollTop 以适应不同的分辨率

Question

这是我在滚动时用来制作 2 个 div "unwrap" 的方法：

CSS

.entry { 
    height: 40px;    
}
.entry.expanded { 
    height:600px;        
}

JavaScript

 $($('.entry').get(0)).addClass('expanded');
 $(window).on('scroll', function (e) {
     var x = $(window).scrollTop();
     if (x > 820) {
         $($('.entry').get(1)).addClass('expanded');
     }
     if (x > 1525) {
         $($('.entry').get(2)).addClass('expanded');
     }
 });

它在我的 1920x1080p 屏幕上工作得很好，但在朋友的 1920x1200px 上却不行，因为没有 820px 可以滚动..

我怎样才能解决这个问题以适用于所有分辨率？我尝试过这个，但不幸的是没有任何反应：

 $($('.entry').get(0)).addClass('expanded');
 $(window).on('scroll', function (e) {
 var availableScroll = $(document).height() - $window.height();
     var x = $(window).scrollTop();
     if (x > 820 || x  == availableScroll) {
         $($('.entry').get(1)).addClass('expanded');
     }
     if (x > 1525 || x  == availableScroll) {
         $($('.entry').get(2)).addClass('expanded');
     }
 });

是否有一种奇特的方法，可以计算底部的像素或一些相对于垂直分辨率的方法？

Here 是带有代码的网页（滚动时可以看到 2 个 div 展开）。

Answer 1

您之前的功能似乎运行良好。我正在将它作为 MacBook Pro 进行测试。但是，有时它似乎不会在 JQuery 时被触发。您可以做的是等待几毫秒来检查滚动是否完成。如果滚动完成，那么你可以简单地检查滚动的值。

选项 1:

jQuery debounce is a nice one for problems like this. jsFidlle

所以你修改后的代码将是（你需要使用debounce）

$(window).scroll($.debounce( 250, true, function(){
    console.log("Still scrolling");
}));
$(window).scroll($.debounce( 250, function(){
     var x = $(window).scrollTop();
     console.log("Scrolling finished");
     if (x > 820) {
         $($('.entry').get(1)).addClass('expanded');
     }
     if (x > 1525) {
         $($('.entry').get(2)).addClass('expanded');
     }
}));

选项 2：

您可能不喜欢使用 JQuery Debounce 然后您可以使用带有定时器功能的本机方法。请参阅下面的代码，您可以根据需要调整定时器持续时间。

它只是在等待滚动事件完成，并等待一定毫秒后滚动事件被召回。如果滚动重新触发，那么它只是清除计时器并再次开始等待。如果计时器完成，则它会执行您指定的方法。

$(window).scroll(function() {

    var timerDuration = 250; // In milliseconds
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
         var x = $(window).scrollTop();
     console.log("Scrolling finished");
     if (x > 820) {
         $($('.entry').get(1)).addClass('expanded');
     }
     if (x > 1525) {
         $($('.entry').get(2)).addClass('expanded');
     }
    }, timerDuration));
});

Answer 2

一般来说，避免使用 == 进行滚动，因为即使滚动偏离 .0001，它也会解析为 false。同时将 $window 替换为 $(window).

 $($('.entry').get(0)).addClass('expanded');
 $(window).on('scroll', function (e) {
 var availableScroll = $(document).height() - $(window).height();
     var x = $(window).scrollTop();
     if (x > 820 || Math.abs(x - availableScroll) < 10) {
         $($('.entry').get(1)).addClass('expanded');
     }
     if (x > 1525 || Math.abs(x - availableScroll) < 10) {
         $($('.entry').get(2)).addClass('expanded');
     }
 });

此外，如果您想在页面首次加载时执行代码，请使用 $(document).ready(handler) 模式。

调整 scrollTop 以适应不同的分辨率

Adapt scrollTop to work with different resolutions

javascript

jquery

screen-resolution