[英]Float a div at the bottom right corner, but not inside footer
I'm trying to implement a "go to top" button that floats at the bottom right corner of a page. 我正在尝试实现一个浮动在页面右下角的“go to top”按钮。 I can do this with the following code, but I don't want this button to enter the footer of my page. 我可以使用以下代码执行此操作,但我不希望此按钮进入我的页面的页脚。 How can I stop it from entering the footer and stay at the top of it when user scrolls the page down to the bottom of the page? 当用户将页面向下滚动到页面底部时,如何阻止它进入页脚并停留在页眉顶部?
CSS CSS
#to-top {
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: #f7f7f7;
color: #333;
text-align: center;
cursor: pointer;
display: none;
}
JavaScript JavaScript的
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#to-top').fadeIn();
} else {
$('#to-top').fadeOut();
}
});
$('#to-top').click(function() {
$('body,html').animate({scrollTop:0},"fast");
});
HTML HTML
<div id="to-top">Back to Top</div>
EDIT Here is a drawing of how it should look like. 编辑下面是它应该是什么样子的图。 The black vertical rectangle is a scroll bar. 黑色垂直矩形是滚动条。 The "back to top" button should never enter the footer region. “返回顶部”按钮不应进入页脚区域。
The solution turned out to be more complicated than I thought. 事实证明,解决方案比我想象的要复杂得多。 Here is my solution. 这是我的解决方案。
It uses this function to check if footer is visible on the screen. 它使用此功能检查页脚是否在屏幕上可见。 If it is, it positions the button with position: absolute
within a div. 如果是,则将按钮position: absolute
为div position: absolute
。 Otherwise, it uses position: fixed
. 否则,它使用position: fixed
。
function isVisible(elment) {
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elment).offset().top;
return y <= (vpH + st);
}
$(window).scroll(function() {
if($(this).scrollTop() == 0) {
$('#to-top').fadeOut();
} else if (isVisible($('footer'))) {
$('#to-top').css('position','absolute');
} else {
$('#to-top').css('position','fixed');
$('#to-top').fadeIn();
}
});
Increase the value of bottom: 10px;
增加bottom: 10px;
的价值bottom: 10px;
than the height of footer. 比页脚的高度。 I saw your screenshot now,just add some padding-bottom to it. 我现在看到了你的截图,只是添加了一些填充底部。
$(document).ready(function(){
$(window).scroll(function(){
btnBottom = $(".btt").offset().top + $(".btt").outerHeight();
ftrTop = $(".footer").offset().top;
if (btnBottom > ftrTop)
$(".btt").css("bottom", btnBottom - ftrTop + $(".btt").outerHeight());
});
});
You forgot to give the z-index
, that prevents it from being on top! 你忘了给z-index
,这可以防止它在顶部!
z-index: 999;
Or if it is overlapping with the footer of your page, you can increase the co-ordinates. 或者,如果它与页面的页脚重叠,则可以增加坐标。
bottom: 50px;
Your question is still not clear, "stop it from entering the footer". 你的问题仍然不明确,“阻止它进入页脚”。 Does it overlap? 它重叠了吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.