Как сделать кнопку оставаться выше нижнего колонтитула при прокрутке в нижней части страницы

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(); 
}); 

Это то, что я Тхи nk - это самое близкое из того, что я пытаюсь сделать, хотя они используют jQuery, к которому я не знаю, как реализовать свой код, но вместо того, чтобы иметь полную боковую панель, мне нужна только кнопка обратной связи, чтобы придерживаться моего нижнего в левой части экрана, при приближении к области нижнего колонтитула будет остановлена ​​над ним.

lockedfixed.js

Answer 1

рабочее положение фиксируется в нижнем классе

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

Answer 2

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