如何在页面底部滚动时将按钮留在页脚上方

我有一个“反馈”按钮。应始终显示在屏幕的左下角。 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

如何在页面底部滚动时将按钮留在页脚上方

回答

相关问题