How to get 50% relative to the screen size, using jquery?

Question

This is what i have

$(window).scroll(function(){
  var y = $(window).scrollTop();

  if (y > 400 & y < 10000) {
    $("#font").css("top", 0 + $(window).scrollTop());
  }
});

The 400 should be 50% relative to screen size. And the 10000 100%

Answer 1

You can use the innerHeight (or use outerHeight to get the height of the complete browser window) property of the window object to determin the screen size. This will return the height of the visible part of the page:

$(window).scroll(function(){
  var y = $(window).scrollTop();

  var intViewportHeight = window.innerHeight;

  if (y > (intViewportHeight * 0.5) & y < (intViewportHeight * 1)) {
    $("#font").css("top", 0 + $(window).scrollTop());
  }
});

PS: you obviously can omit the * 1 part of the second formula. I just used it for clarification of the 100%