如何檢測滾動值是否超過窗口高度？

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; 

}