Question

我有一个mailchimp订阅时事通讯表格。我希望表单向下滚动，页面滚动。

现在它只是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" );
    });

如何使表单与页面滚动一起滚动

1 个答案: