當某個 div 存在時如何隱藏元素？

Question

當滾動查看 slider 或頁腳時，我想隱藏我的粘性按鈕。

我試過這段代碼：

$(window).scroll(function() {
    if ($(this).scrollTop() < 250) { 
        $("#sticky-button").css({
            'display': 'none'
        });
    }
});

因此，它的作用是在滾動高度低於 250 像素時隱藏我的粘性按鈕。

但是在移動設備上，我意識到它不起作用，因為移動設備中的 250 像素是一個相當大的高度。

那么如何通過使其在某個 div 上工作（例如：#slider、#footer）而不是設置 250 高度來做到這一點？

Answer 1

您應該使用.offset().top檢查元素的 position

 $(window).scroll(function() { var elemOffsetTop = $('#slider').offset().top; if ($(this).scrollTop() > elemOffsetTop ) { $("#sticky-button").css({ 'display': 'none' }); }else{ $("#sticky-button").css({ 'display': 'block' }); } });

 #sticky-button{ position: fixed; top:0; left:0; width: 100px; height: 100px; background-color: blue; }.section{ width: 100%; height: 200px; border: 2px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sticky-button"></div> <div class="section"></div> <div class="section"></div> <div id="slider" class="section">slider</div> <div class="section"></div> <div class="section"></div> <div class="section"></div>

Answer 2

你可以試試這個

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

if (isScrolledIntoView($('#yourDiv'))) {
    $("#sticky-button").css({
        'display': 'none'
    });
}