Wie man das Formular mit dem Blättern der Seite scrollen

Question

Ich habe ein Mailchimp abonnieren Newsletter-Formular. Ich möchte, dass das Formular zusammen mit der Seite scrollen.

Im Moment ist es nur fadeIn, wenn die Seite gescrollt wird, aber ich möchte, dass sie auch nach unten bewegt wird, wenn der Benutzer die Seite herunterscrollt.

das ist mein html.

<div class="container"> 
    <div class="row"> 
     <div class="pull-right"> 
      <!-- Begin MailChimp Signup Form --> 
      <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css"> 
      <form id="subscribe-form" name="mc-embedded-subscribe-form" class="validate"> 
       <p>Sign up for our newsletter</p> 
       <div id="signup_scroll"> 
        <div class="mc-field-group"> 
         <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> 
         </label> 
         <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required> 
        </div> 
        <div class="clear"><input type="submit" value="Submit" name="subscribe" id="subscribe" class="button"></div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

JS

var amountScrolled = 300; 
$(window).scroll(function() { 
    if ($(window).scrollTop() > amountScrolled) { 
     $('#subscribe-form').fadeIn('slow'); 
    } else { 
     $('#subscribe-form').fadeOut('slow'); 
    } 
}); 

$('#subscribe-form').click(function() { 
    $('html, body').animate({ 
     scrollTop: 0 
    }, 700); 
    return false; 
}); 

Answer 1

ich es gelöst.

html

<div class="row newsletter" id="scrollingDiv"> 
     <!-- Begin MailChimp Signup Form --> 

     <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css"> 
     <form id="subscribe-form" name="mc-embedded-subscribe-form" class="validate"> 
      <a id="close" onclick="closeDialog()"><i class="fa fa-times" aria-hidden="true"></i></a> 
      <p>Join Our Newsletter!</p> 

      <div id="signup_scroll"> 
       <div class="field-group"> 
        <label for="EMAIL">Email Address <span class="asterisk">*</span> 
        </label> 
        <input type="email" value="" name="EMAIL" class="required email" id="EMAIL" required> 
       </div> 
       <div class="clear"> 
        <input type="submit" id="subscribe" class="button"> 
       </div> 
      </div> 
     </form> 
    </div> 

js

var $scrollingDiv = $("#scrollingDiv"); 

    $(window).scroll(function(){ 
     $scrollingDiv 
      .stop() 
      .animate({"marginTop": ($(window).scrollTop()-30) + "px"}, "slow"); 
    });