定高页脚滚动效果

Question

我正在寻找解决办法。当用户降落在页面上时，通常当主页面滚动结束时，我有一个带有滚动条的固定高度页脚。我想滚动固定的高度页脚到结束，而不采取鼠标在该部分。但是这个特性完全不同。

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

这里是图像来澄清的理解。

图像链接

    <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)看一看这问题的公认答案。

2)在用户到达主要内容( .focus() 更多关于焦点的信息 )底部后，以编程方式将焦点设置到您的页脚上。

3) jQuery有一个名为scrollTop()的方法，一旦焦点切换回主内容，您就可以查看在页脚上使用的方法。关于scrollTop的更多信息