我有一个粘贴的页脚,其中包含一个可单击的箭头,可让我单击网站上的各个部分,唯一的问题是到达最后一个部分时它不会消失。我是jQuery和JS的新手,不确定如何执行类似的操作。
我做过一些研究,但没有运气尝试过
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('arrow').style.display='none';
}
}
这是我剩下的一切:
<div class="scroller animated pulse infinite" id="arrow">
<i class="ion-md-arrow-dropdown"></i>
</div>
CSS:
.scroller {
height: 80px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: transparent;
box-shadow: 0 2px 2px #ddd;
z-index: 1;
}
.scroller i {
color: #fff;
-webkit-text-stroke: 1px #555;
font-size: 70px;
margin: 0 48.5%;
}
JS:
$(function(){
var pagePositon = -1,
sectionsSeclector = '.scrolling_section',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('#arrow i').click(function(e){
if ($(this).hasClass('ion-md-arrow-dropdown') && pagePositon+0 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top - $('nav').height()
}, 2000);
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
答案 0 :(得分:1)
根据我的理解-您首先应该看到页脚部分可见,如果是-隐藏箭头,否则-显示箭头
为此,此代码应该可以解决问题
$(window).scroll(function() {
var top_of_element = $('.footer-nav').offset().top;
var bottom_of_element = $('.footer-nav').offset().top + $('.footer-nav').outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('#arrow').hide();
} else {
$('#arrow').show();
}
});