1

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.

Awsme Sandy
  • 1,398
  • 7
  • 20
  • Possible duplicate of [How do I determine height and scrolling position of window in jQuery?](https://stackoverflow.com/questions/303767/how-do-i-determine-height-and-scrolling-position-of-window-in-jquery) – Teemu Aug 07 '17 at 08:57
  • 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. – Awsme Sandy Aug 07 '17 at 09:12

3 Answers3

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');
  }
 });
Paweł Kwiatkowski
  • 69
  • 3
  • 14
0

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>
Chandra Kumar
  • 4,127
  • 1
  • 17
  • 25
  • 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. – Awsme Sandy Aug 07 '17 at 09:15
0

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;

}

Jimmy
  • 43
  • 7