javascript - ページの下部に向かってスクロールするときにボタンをフッターの上にとどめる方法

Question

「フィードバック」ボタンがあります。は常に画面の左下に表示される必要があります。

フッターに到達しようとしているときを除いて、一番上に留まる必要があります。

フッターを表示し続けるときに、下にスライドし続けないでください。

ここに私のHTMLマークアップがあります:

    <div class="TMDOQ-tab navbar-fixed-bottom">
  <a href="#" id="TMDOQ_button">
          <img src= "assets/TMDOQ.png" alt= "Logo-DitoMismo" class="hidden-phone" id="logoTMDOQ">
        </a>
  <div class="TMDOQ-form">
  <fieldset>
    <div class="control-group">
      <label class="control-label">First name:</label>
        <div class="controls">
          <input type="text" placeholder="Type something…">
        </div>          
    </div>
    <div class="control-group">
      <label class="control-label">Email Address:</label>
      <div class="controls">
        <input type="text" placeholder="Type something…">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label">Cellphone Number:</label>
      <div class="controls">
        <input type="text" placeholder="Type something…">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label">Item Name:</label>
      <div class="controls">
        <input type="text" placeholder="Type something…">
      </div>
    </div>
    <div class="control-group">
      <button type="submit" class="btn-primary">Submit</button>
    </div>
  </fieldset>
  </div>
</div>

CSS コード:

 .TMDOQ-tab
{
    position:absolute;
    left:0;
    bottom:0;

}
.TMDOQ-tab a 
{
    display:block;
    height:20px;
    width:100px;
    text-align:center;
    background: url('../img/header-footer.png');


    padding:8px;
    float:left;
    cursor:pointer;
    /*Font*/
    color:#FFF;
    font-weight:bold;
    font-size:18px;


    -webkit-border-radius: 0 20px 0 0;
            border-radius: 0 20px 0 0;
    background-clip: padding-box;


}
.TMDOQ-tab .TMDOQ-form
{
    clear:both;
    height:auto;
    width:auto;

    background: url('../img/header-footer.png');
    padding:30px;
    display: none;

    -webkit-border-radius: 0 20px 0 0;
            border-radius: 0 20px 0 0;
    background-clip: padding-box;

}

私が使用しているJSの間：

$("#TMDOQ_button").click(function()
{
        $('.TMDOQ-form').slideToggle();
});

これは私がやろうとしていることに最も近いと思いますが、コードに実装する方法がわからないjQueryを使用していますが、完全なサイドバーを使用する代わりに、フィードバックボタンを貼り付けるだけで済みます画面の左下で、フッター領域に近づくとその上で停止します。

lockfixed.js

Answer 1

ボトムクラス固定の使用位置

 .TMDOQ-tab navbar-fixed-bottom
    {
    position: fixed;
    }