How to make the form scroll alongwith the page scroll

Question

I have a mailchimp subscribe newsletter form. I want the form to scroll down alongwith the page is scroll.

Right now it just fadeIn, fadeOutwhen the page is scrolled but I want it to also move down when the user is scrolling the page down.

this is my 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;
});

Check this out and start from here. http://stackoverflow.com/questions/12522807/scroll-event-listener-javascript — Dominick, Nov 10 '16 at 11:46
@ScottyDoesKnow why did you down-voted my question ? Its not I have asked a blatant question. — Nauman, Nov 10 '16 at 11:50
Buddy, I didnt downvote your question. somebody else did. However i can see why — Dominick, Nov 10 '16 at 11:53
@ScottyDoesKnow I have updated my question and code. Could you please tell why do you think someone had downvoted it earlier? Just so that I can improve it. thanks — Nauman, Nov 14 '16 at 11:57
@NaumanTanwir I didn't downvote either, but if you hover over the button, it says downvotes should be given if "This question does not show any research effort, it is unclear or not useful". Given that a google search using your question title (https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#safe=active&q=make+form+scroll+along+with+the+page) shows up quite a few promising results, I would suggest the downvoter felt you had not done a lot of research, nor does it appear you've made much attempt to solve the problem yourself. — ADyson, Nov 14 '16 at 13:33

score 1 · Answer 1 · answered Nov 15 '16 at 14:49

I solved it.

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

How to make the form scroll alongwith the page scroll

1 Answers1