Adapt scrollTop to work with different resolutions

Question

This is what I use to make 2 divs "unwrap" while scrolling:

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');
     }
 });

It works perfectly fine on my 1920x1080p screen but it doesn't on a friend's 1920x1200px because there aren't 820px to scroll..

How can I solve this to work with every resolution? I tried with this, but unfortunately nothing happens:

 $($('.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');
     }
 });

Is there a fancy method, that maybe calculates the pixels from the bottom or some method relative to the vertical res?

Here's the webpage with the code live (you can see the 2 divs unwrapping when scrolling).

http://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript does this help? — danielmhanover, May 29 '15 at 00:01
I tried replacing `$window.height()` with `$(window).availHeight` but it's still the same. On iPhone in portrait mode there's no scrolling on default page load but still the function is not triggered (i.e. the divs don't have the class added). — MultiformeIngegno, May 29 '15 at 00:07
Why are you subtracting `$(document).height() - $window.height()`, those are usually the same. Also, I would caution against the `==` operator here. If the scroll is off by even .0001 it will resolve as false. Maybe try `abs(x - availableScroll) < 10` or any other arbitrarily small difference. — danielmhanover, May 29 '15 at 00:12
So, you mean `var availableScroll = abs(x - availableScroll) < 10;` and then still `x > 820 || x == availableScroll`? — MultiformeIngegno, May 29 '15 at 00:14
No, `var availableScroll = $(document).height() - $(window).height();`, `var x = $(window).scrollTop();` and `x > 820 || abs(x - availableScroll) < 10` — danielmhanover, May 29 '15 at 00:18
Updated the code here, but nothing changed http://luca-longobardi.com/suoni-test3.html — MultiformeIngegno, May 29 '15 at 00:25
Yes!!! Now it works!! Last thing: now on iPhone portrait mode, the event fires immediately when I scroll. But shouldn't it be fired by default? All the page is displayed on screen, there's no space to scroll — MultiformeIngegno, May 29 '15 at 00:34
No, because the block is inside `$(window).on('scroll', ...`. Look at my answer for how to get around this — danielmhanover, May 29 '15 at 00:41

score 1 · Answer 1 · answered May 29 '15 at 00:19

Your former functions seems to working fine. I am testing it as MacBook Pro. However, at sometime it seems it is not fired at JQuery. What you can do is you can wait for few milliseconds to check if the scroll is finished. If scroll is finished then you can simply check the value of scroll.

Option 1:

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

So your modified code will be (you need to use 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');
     }
}));

Option 2:

There may be a chance you don't like use JQuery Debounce then you can native approach with timer function. See the code below and you can adjust the timer duration as per your needs.

It is simply waiting for scroll event to be finished and wait for certain milliseconds before it scroll event recalled. If scroll refires then it simply clear the timer and start waiting again. If timer is finished then it executes the method you have stated.

$(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));
});

Thanks for the reply. :-) I'm trying your second function here http://luca-longobardi.com/suoni-test4.html, on iPhone 5 portrait there's no scrolling space on page load but .entry divs don't have the class added.. — MultiformeIngegno, May 29 '15 at 00:23
Try printing the value of x in HTML element with fixed position. That will may help in debugging the problem. — codesnooker, May 29 '15 at 00:27
With the full page scroll the value of x is only 805 and your event fires up at 820 :) — codesnooker, May 29 '15 at 00:33
If you check the top value of top of performance div it is nearby 750. Why are firing event at 820? $('#performance').position() — codesnooker, May 29 '15 at 00:35
That's true but it's not related to what happens if all the page is displayed on screen and there's no space to scroll — MultiformeIngegno, May 29 '15 at 00:36

score 1 · Accepted Answer · answered May 29 '15 at 00:40

In general, avoid the == for scrolling because if the scroll is off by even .0001 it will resolve as false. Also replace $window with $(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');
     }
 });

Also, if you want to execute code when the page first loads, use the $(document).ready(handler) pattern.

Adapt scrollTop to work with different resolutions

2 Answers2