Question

I'm looking for a way to detect the amount of page scrolled by % rather than px, consider:

function doBanner() {
  var scrollPos = $( window ).scrollTop();
     if ( scrollPos > 250 && !uped && !doing){
   up();
     } else if ( scrollPos <= 250 && !doing && uped ) {
   down();
}

Basically this is part of a pop up banner on a webpage, the banner will pop up once the user has scrolled 250px, and will pop away again (height 0, height 40) once the user has scrolled back up to 250px or less from the top.

The problem with this method, is that on some pages the user will not have to scroll 250px to see everything on the page, thus the banner will not appear.

Any advice/alternatives I could consider?

If you know of a way to use % instead of px, this would be great :)

Was it helpful?

Solution

I would calculate the percentage in base to the current window size. You can get those values with the functions width and height of jQuery:

var windowsWidtdh = $(window).width();
var windowsHeight = $(window).height();

Then you could do:

var scrolledPercentage = (scrollPos * 100) / windowsHeight;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top