jQuery：如果滾動事件內部條件無法正常工作

我在窗口底部有一個固定的小部件（固定位置），它應該基於小部件相對於小部件下方的內容的位置來顯示/隱藏在頁面上。如果用戶在.page-isi內容前滾動通過，那麼.pinned-isi應該隱藏，否則顯示。當我做了控制檯日誌時，條件觸發正確，但是在將顯示/隱藏功能附加到$('.pinned-isi')之後，它會通過滾動來回滾動而不是像預期的那樣觸發隱藏功能。jQuery：如果滾動事件內部條件無法正常工作

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

來源

2016-05-23 Rahul Dagli

你可以分享可執行的演示/片段或[JSFiddle]（https://jsfiddle.net/）嗎？ – Rayon

這是因爲當你$('.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>

來源

2016-05-23 07:49:44 Justinas

7秒更快，甚至有一個例子：D +1 – yckart

這是因爲.pinned-isi的offset由於該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(); 
    } 
});

而且，我可以看到你只是比較的元素偏移和不包括滾動位置。不過，這是很難給出一個正確的答案，沒有你們的標記。

來源

2016-05-23 07:49:51 yckart

jQuery：如果滾動事件內部條件無法正常工作

回答

相關問題