[英]Re-Positioning Scroll to Top Button when Footer appears (So it never overlaps)
[英]Repositioning Scroll to Top Button when Footer appears
一旦站点用户向下滚动足够远以使页脚出现在屏幕上,就必须有一种方法使我的“滚动到顶部”按钮处理#footer容器的顶部,对吗? 现在它只想固定在屏幕的左下角-这很有意义,但是必须有一种方法可以做我想做的事情,作为一个新手,我似乎无法弄清楚! 任何帮助将非常感激。 谢谢!
我网站上我们使用按钮的页面: http : //joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout
这是我的脚本:
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
和相关的CSS:
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: none;
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: url('litebox-next.png') no-repeat center 50%;
background-size: 40px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .335;
}
.cd-top:hover {
background-color: transparent;
opacity: 1!important;
}
和html:
<a href="#0" class="cd-top">Top</a>
您的目标是使“滚动到顶部”按钮位于页脚顶部时是否可单击? 因为您要做的就是将按钮的z-index(CSS属性)设置为100或更高,因此将其置于页脚顶部。
如果您想将其移动到页脚上方,我相信您可以在$(window).scroll()中放置第二个条件,以检查scrollTop()是否在页面末尾附近(通过将其与$(document)比较)。 height()),然后将按钮的“底部”值设置为更高的值(例如,使用$ back_to_top.css(“ bottom”,“ 200”))。
好吧,我想通了! 这是我做的,以防万一有人遇到类似的问题。 我在$(window).scroll(function()下添加了以下2条if语句:
if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height()) {
$('.cd-top').css("position","fixed"); //resetting it
$('.cd-top').css("bottom","40px"); //resetting it
}
if($(window).scrollTop() + $(window).height() > $(document).height() - $("#footer").height()) {
$('.cd-top').css("position","relative"); // make it related
$('.cd-top').css("bottom","0"); //
}
签出-现在可以完全按照我的意愿运行了! http://joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.