gpt4 book ai didi

javascript - 滚动到页面底部时如何使按钮停留在页脚上方

转载 作者:太空宇宙 更新时间:2023-11-03 21:50:05 25 4
gpt4 key购买 nike

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

我认为这是我正在尝试做的最接近的事情,尽管他们使用的是我不知道如何在我的代码中实现的 jQuery,但我不需要完整的侧边栏,我只需要反馈按钮贴在屏幕的左下方,当靠近页脚区域时,它会停在它上面。

lockedfixed.js

最佳答案

使用固定在底层的位置

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

关于javascript - 滚动到页面底部时如何使按钮停留在页脚上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17917974/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com