Slide-in Call to Action div buggy auf klicken und scrollen nach unten Seite

Question

Ich habe ein div, dass bei Klick wird auf der rechten Seite einschieben, aber ich versuche es auch auf Scroll-in haben, wenn es nicht schon war geöffnet oder geöffnet. Sie können also auf die Schaltfläche klicken, um sie einzublenden, oder wenn sie geschlossen wird, während Sie die Seite nach unten scrollen, die sie öffnet, und dann nach einigen Sekunden verschwindet oder wenn Sie auf klicken.

Ich habe es irgendwie funktioniert, aber sehr fehlerhaft. Jede Hilfe würde sehr geschätzt werden!

http://jsfiddle.net/abennington/50tab7vh/2/

HTML:

<div class="floating-form" id="contact_form"> 
<div class="contact-opener">CTA Box Toggle</div>  
    <div class="contact_body"> 

     <h3>This is a CTA Box</h3> 
     <p>On click it will slide out and on scroll it will scroll out as you get down the page and then go away.</p> 

     <a href="#" class="btn btn-primary btn-block"><i class="fa fa-calendar-o"></i> CTA Button</a> 


    </div> 
</div> 

jQuery:

$(document).ready(function(){ 
    var buttonhieght = $('.contact-opener').width()-52; 
    var popdiv = $('#contact_form').width(); 
    var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ; 
    _floatbox.css("right", "-"+ popdiv+"px"); //initial contact form position 
    _floatbox_opener.css("left", "-"+ buttonhieght+"px"); //initial contact form position 

    //Contact form Opener button 
    _floatbox_opener.click(function(){ 
     if (_floatbox.hasClass('visiable')){ 
      _floatbox.animate({'right': '-'+ popdiv+'px'}, {duration: 300}).removeClass('visiable'); 
     }else{ 
      _floatbox.animate({"right":"0px"}, {duration: 300}).addClass('visiable'); 
     } 
    }); 
}); 
$(document).on('scroll', function() { 
    var popdiv = $('#contact_form').width(); 
    var _floatbox = $("#contact_form"); 
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop > 700) { 
     if (_floatbox.hasClass('visiable')){ 
      _floatbox.animate({'right': '-'+ popdiv+'px'}, {duration: 300}).removeClass('visiable'); 
     }else{ 
      _floatbox.animate({"right":"0px"}, {duration: 300}).addClass('visiable'); 
     } 
    } 
}) 

CSS:

/* floating box style */ 
.floating-form * { color: #fff; } 
.floating-form { 
    width:300px; 
    max-width: 300px; 
    top: 100px; 
    font: 13px Arial, Helvetica, sans-serif; 
    background: #F9F9F9; 
    background: #754c24; 
    color: #fff;  
    right: 10px; 
    position: fixed; 
    z-index: 1000; 
    box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); 
    -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); 
    -webkit-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); 
    } 
.contact-opener { 
    position: absolute; 
    text-transform:uppercase; 
    left: -100px; 
    transform: rotate(-90deg); 
    top: 150px; 
    background-color: #754c24; 
    padding: 10px 15px; 
    color: #fff; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43); 
    cursor: pointer; 
    border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    -moz-border-radius: 5px 5px 0px 0px; 
    box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); 
    -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); 
    -webkit-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); 

} 
#contact_form .contact_body { padding: 30px 30px 10px 30px; } 
#contact_form .contact_body h3 { margin: 0rem 0 1.0rem; } 
#contact_form .contact_body ol { padding: 5px 0px 10px 20px; } 
#contact_form .contact_body li { padding: 8px 0px; font-weight: 700; } 
#contact_form .contact_body .btn-primary { background: rgba(35,26,19,0.9); margin-bottom: 20px; } 

Answer 1

Das Problem ist, dass die Scroll-Handler nie gelöst wird, so Die #contact_form zeigt/versteckt, bis alle Scroll-Ereignisse "gelöscht" wurden. Ich habe Ihre Geige so aktualisiert, dass sie nur einmal versucht, die #contact_form anzuzeigen, wenn die Seite nach einem bestimmten Punkt gescrollt wird, und dann wird der Scroll-Handler entfernt.

Ich denke, das ist das, was Sie wollen: http://jsfiddle.net/50tab7vh/3/