固定高度页脚滚动效果

Question

我正在寻找解决方案。当用户在主页滚动结束时正常向下滚动页面时，我有一个带有滚动条的固定高度页脚。我想将固定高度的页脚滚动到末尾，而无需在该部分上使用鼠标。使用 Bootstrap 但这个功能完全不同。

1. 隐藏固定高度页脚的滚动条
2. 无论用户鼠标是否在该部分上，都可以使用鼠标滚动将内容滚动到底部。
3. 当用户滚动主页时​​，将页脚位置重置为顶部。

这是为了清晰理解的图像。

Image link

    <div id="sidebar">
    <div id="scroller">

        <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <p class="Callus">Call Us <span>+56465454</span>
                    </p>
                </div>
                <!-- col-md-3 -->
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <p class="share">Share
                        <a href="#" class="linkedin"></a>
                        <a href="https://twitter.com" class="twitter" target="_blank"></a>
                    </p>
                </div>
                <!-- col-md-3 -->
                <div class="col-md-6 col-sm-12 col-xs-12 no-gutter">
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <p class="course">Get Our Free Course</p>
                    </div>
                    <!-- col-md-3 -->
                    <div class="col-md-9 col-sm-12 col-xs-12 no-gutter">
                        <div class="col-md-9 col-sm-8 col-xs-12 no-gutter">
                            <div class="form-group">
                                <input type="email" class="form-control newsletter" placeholder="Email address">
                            </div>
                            <!-- form-group -->
                        </div>
                        <!-- col-md-9 -->
                        <div class="col-md-3 col-sm-4 col-xs-12">
                            <button type="submit" class="btn btn-default outlineSubmit">Sign Up</button>
                        </div>
                        <!-- col-md-3 -->
                    </div>
                    <!-- col-md-9 -->
                </div>
                <!-- col-md-6 -->
            </div>
            <!-- row -->
        </div>
        <!-- container -->

        <hr />

        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12 FooterForm">
                    <div class="col-md-8 col-sm-8 col-xs-12 no-gutter">
                        <h4>Say Hello</h4>
                        <div class="footerForm form-style" id="contact_form">
                            <div id="contact_results"></div>
                            <div id="contact_body">
                                <div class="form-group col-md-6 col-sm-6 col-xs-12 no-gutter">
                                    <input type="text" name="name" id="name" required="true" class="input-field form-control footerFields" placeholder="Name"/>
                                    <input type="text" name="surname" id="surname" required="true" class="input-field form-control footerFields" placeholder="Surname"/>
                                    <input type="email" name="email" required="true" class="input-field form-control footerFields" placeholder="Email"/>
                                </div><!-- col-md-6 -->
                                <div class="form-group col-md-6 col-sm-6 col-xs-12 no-gutter">
                                    <textarea name="message" id="message" class="textarea-field form-control" required="true" rows="3"></textarea>
                                    <input type="submit" id="submit_btn" value="Submit" class="btn outlineSubmit2" />
                                </div><!-- col-md-6 -->
                            </div><!-- contact_body -->
                        </div><!-- contact_form -->
                    </div><!-- col-md-8 -->
                    <div class="col-md-3 col-sm-3 col-xs-12 customRight">
                        <h4>Sitename</h4>
                        <p class="address">Address</p>
                        <h4>Twitter</h4>
                        <p class="address"><a href="@"><i class="fa fa-twitter"></i> @twitter</a>
                        </p>
                    </div>
                    <!-- col-md-3 -->
                </div>
                <!-- col-md-12 -->

                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                        <p class="copyright">COPYRIGHT 2015 ARTIOS. All rights reserved.</p>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                        <div id="top-link-block" class="goTop pull-right">
                            <a href="#top" class="linkup" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
                                <i class="fa fa-angle-up"></i>
                            </a>
                        </div><!-- top-link-block -->
                    </div>
                </div><!-- col-md-12 -->
            </div><!-- row -->
        </div><!-- container -->
    </div><!-- footer -->
</div>
</div>

CSS

#sidebar{
    float: left;
    width: 100%;
    height: 300px;
    border: 0px solid #000;
    overflow: hidden;
}
#scroller{
    float: left;
    width: 101%;
    height: 300px;
    overflow: scroll; 
}

Answer 1

1) 查看this 问题的已接受答案。
2) 考虑在用户到达后以编程方式将焦点设置到您的页脚主要内容的底部 - .focus() More Info on focus
3) jQuery 有一个名为 scrollTop() 的方法，一旦焦点切换回主内容，您可以考虑在页脚上使用它内容。 More Info on scrollTop