如何在頁面底部滾動時將按鈕留在頁腳上方

我有一個「反饋」按鈕。應始終顯示在屏幕的左下角。 The Feedback button 如何在頁面底部滾動時將按鈕留在頁腳上方

除了當你即將到達頁腳，它應該留在上面，

enter image description here

，而不是繼續當你繼續查看頁腳滑下。

enter image description here

這裏是我的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(); 
});

這是我THI儘管他們正在使用jQuery，但我不知道如何實現我的代碼，但nk與我正在嘗試執行的操作是最接近的，但我不需要完整的側邊欄，而只需要反饋按鈕來粘貼到我的下邊屏幕左側，當靠近頁腳區域將停在它的上方。

lockedfixed.js

來源

2013-07-29 lozadaOmr

使用位置在CSS固定在按鈕 – Hushme

@Hushme：我嘗試添加的位置是：固定;但是每當我到達頁面的底部時，它在到達頁腳開始時都不會停止。 – lozadaOmr

比使用這個插件scrolltofixed搜索它在谷歌 – Hushme

使用位置固定在底部類

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

來源

2013-07-29 07:17:01 akash

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

來源

2013-07-29 07:25:12 Natesan

如何在頁面底部滾動時將按鈕留在頁腳上方

回答

相關問題