Question

这就是我用来制作2个div＆＃34; unwrap＆＃34;滚动时：

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是一个不错的选择。 jsFidlle

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

wp_10

选项2：

你可能不喜欢使用JQuery 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');
     }
}));

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以使用不同的分辨率

2 个答案: