如何检测滚动值是否超过窗口高度？

Question

在我的情况下，标题在滚动时变得固定，但只有当我们向上滚动一点时才可见，而当我们向下滚动时隐藏，这就是所有工作正常。

要求：标题只应该可见，如果我向上滚动，滚动至少应该是窗口高度。例如，如果我的窗口高度是700像素，那么只有当我将页面向上滚动700px时，页眉才应该可见，并且当我向下滚动页面时立即隐藏。

在此先感谢。

Answer 1

使用此代码：

演示：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> 

Answer 2

试试这个：相对于身体

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

Answer 3

1.get位置相对于父元素的位置偏移得到，如果父节点不是body，继续。

2.get滚动位置 这取决于如何滚动。如果本地滚动，通过element.scroll获取滚动值是可以的。如果使用变换，必须得到改变x或y值

3.body位置 - 滚动位置

例如：

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; 

}