Исправлен эффект прокрутки нижнего колонтитула

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