Как сделать форму прокрутки вдоль страницы прокрутки

Question

У меня есть форма для рассылки новостей по электронной почте. Я хочу, чтобы форма прокручивалась вниз, так как страница прокручивается.

Прямо сейчас это просто fadeIn, fadeOut, когда страница прокручивается, но я хочу, чтобы она также перемещалась вниз, когда пользователь прокручивает страницу вниз.

это мой 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

я решил.

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