jQuery: Wenn die Bedingung innerhalb des Scroll-Ereignisses nicht korrekt funktioniert

Question

Ich habe ein angeheftetes Widget am unteren Rand des Fensters (fest positioniert), das basierend auf der Position des Widgets in Bezug auf den Inhalt unterhalb des Widgets anzeigen/verbergen sollte auf der Seite. Wenn Benutzer scroll vor dem .page-isi Inhalt übergeben, dann sollte die .pinned-isi verstecken sonst zeigen. Als ich das Protokoll loggte, wird die Bedingung korrekt ausgelöst, aber nachdem die Show/Verstecke-Funktion an $('.pinned-isi') angehängt wurde, schaltet sie mit scroll wiederholt hin und her, anstatt nur die Versteckfunktion wie erwartet auszulösen.

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

Answer 1

Es ist, weil, wenn Sie $('.pinned-isi').hide();$('.pinned-isi').offset().top beim nächsten Mal sein wird 0.

Besser Ihr Element Offset speichern, bevor Sie ausblenden.

$(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

Das ist, weil die offset von .pinned-isi aufgrund der toggleing betroffen ist. Sie könnten versuchen, den Offset außerhalb Ihres scroll-Handlers zu cachen.

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(); 
    } 
}); 

Auch, wie ich Sie nur die Versätze Elemente vergleichen sehen können und nicht umfassen die Position blättern ... Aber es ist schwer, eine richtige Antwort zu geben, ohne Ihre Markup.