jQuery：如果滾動事件中的條件無法正常工作

Question

我在窗口底部（固定位置）有一個固定的小部件，該控件應根據小部件相對於頁面上小部件下方內容的位置顯示/隱藏。 如果用戶滾動通過領先的.page-isi內容則.pinned-isi應該隱藏，否則顯示。 當我執行控制台日志時，條件可以正確觸發，但是在將show / hide函數附加到$('.pinned-isi') ，它會反復滾動來回滾動，而不是像預期的那樣觸發hide函數。

$('.full-wrapper').scroll(function(){
    if ($('.page-isi').offset().top - 50 >= $('.pinned-isi').offset().top){
        $('.pinned-isi').show();
    } else {
        $('.pinned-isi').hide();
    }
});

Answer 1

這是因為當您執行$('.pinned-isi').hide(); 下次$('.pinned-isi').offset().top將為0。

隱藏元素之前，最好先保存它。

 $(document).ready(function() { var pinnTop = $('.pinned-isi').offset().top; $('.full-wrapper').scroll(function() { if ((-1 * $('.page-isi').offset().top - 50) >= pinnTop) { $('.pinned-isi').show(); } else { $('.pinned-isi').hide(); } }); }); 

 * { margin: 0; padding: 0; } .full-wrapper { height: 300px; border: 1px solid #ddd; overflow: auto; } .page-isi { height: 3000px; background: -moz-linear-gradient(90deg, #00cb4c 0%, #ffffff 100%); background: -webkit-gradient(linear, 90deg, color-stop(0%, #00cb4c), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(90deg, #00cb4c 0%, #ffffff 100%); background: -o-linear-gradient(90deg, #00cb4c 0%, #ffffff 100%); background: -ms-linear-gradient(90deg, #00cb4c 0%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00cb4c', endColorstr='#ffffff', GradientType='0'); background: linear-gradient(0deg, #00cb4c 0%, #ffffff 100%); position: relative; } .pinned-isi { height: 20px; width: 200px; background-color: red; position: fixed; left: 0; top: 100px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="full-wrapper"> <div class="page-isi"> <div class="pinned-isi"> PINNED </div> </div> </div> 

Answer 2

這是因為offset的.pinned-isi由於該toggleing影響。 您可以嘗試將偏移量緩存在scroll之外。

var fixedPoint = $('.pinned-isi').offset().top

$(window).resize(function(){
    fixedPoint = $('.pinned-isi').offset().top
});

$('.full-wrapper').scroll(function(){
    if ($('.page-isi').offset().top - 50 >= fixedPoint){
        $('.pinned-isi').show();
    } else {
        $('.pinned-isi').hide();
    }
});

另外，正如我所見，您只是比較元素的偏移量而不包含滾動位置...但是，如果沒有標記，很難給出正確的答案。