How to detect if the scroll value is more then the windows height?

Question

In my case the header become fixed on scroll, but only visible when when we scroll up a little bit, and when we scroll down it hides, thats all working fine.

Requirement: The header should only visible if i scroll up and the scroll should be at least of the windows height. For example if my windows height is 700 px, then the header should only visible once i scroll the page 700px up, and hides instantly when i scroll it down.

Thanks in advance.

• Teemu: Possible duplicate of How do I determine height and scrolling position of window in jQuery?
• Awsme Sandy: sorry, but here i am not looking for the scrolling position of window, the requirement is: when i scroll up from any position (and the scroll value should be more then the windows height.) then the header should appear.

Answer 1

Try this:

 $(window).scroll(function(){
 var containerHeight = $('.section-1').height();
 var windowHeight = ( $(window).scrollTop() );
 if( windowHeight > containerHeight ){
 $(".header").removeClass('header-solid');
 } else {
 $('.header').addClass('header-solid');
 }
 });

• Ajay Gupta: I think this should be the proper approach.

Answer 2

Use this code:

Demo: http://output.jsbin.com/ricohevexu

<script>
$(window).scroll(function (e) {
 var height = $(window).scrollTop();
 var winheight = $(window).height();
 if(height > winheight) {
 // Do something
 console.log("Scroll height is more that window height!");
 }
});
</script>

• Awsme Sandy: Chandra, according to your code it calculates the value from the top, what i want, suppose i am in the mid of the page, and if i scrolled up (up to 700px which is my windows height) then the header should be visible.

Answer 3

1.get position relative to body get offset position relative to parent element, if parent node is not body, continue.

2.get scroll position it depends on how to scroll. if native scroll, get scroll value by element.scroll is ok. if use transform, have to get transform x or y value

3.body position - scroll position

example:

export const getBodyLeft = (e:HtmlElement) => {
let offsetLeft = el.offsetLeft;
const offsetParent = el.offsetParent;
if (el.offsetParent && el.offsetParent.nodeName.toUpperCase() !== 'BODY'){
 offsetLeft += getBodyLeft(<HTMLElement>el.offsetParent);
}
return offsetLeft

}

export const getViewTop = (el: HTMLElement, view: HTMLElement) => {
const bodyTop = getBodyTop(el);
const scrollView = view || document.body;
let scrollTop = scrollView.scrollTop;
let transformTop = 0;
const transform = getComputedStyle(<Element>view).transform;
if (transform) {
 const matrix = transform.match(/((-|\d|\.)+)/g) || [];
 const len = matrix.length;
 if (matrix && len > 0) {
 transformTop = Math.abs(Number(matrix[matrix.length - 1]));
 }
}
scrollTop += transformTop;
return bodyTop - scrollTop;

}