当用户从视图顶部向下滚动500px时,会出现一个粘性菜单。当用户从底部向下滚动到500px时,我也想隐藏它。
提前致谢。
var stickTop = $('.sidebar-stick').offset().top + 500;
$(window).scroll(function(){
if( $(window).scrollTop() > stickTop ) {
$('.sidebar-stick').css({opacity: '1'});
$('.stick-dummy').css('display', 'block');
} else {
$('.sidebar-stick').css({opacity: '0'});
$('.stick-dummy').css('display', 'none');
}
});
答案 0 :(得分:1)
一种解决方案是从顶部和底部(不仅仅是顶部)计算两个限制,然后在条件中添加底部限制:
var stickTop = $('.sidebar-stick').offset().top + 500;
var stickBottom = $(document).height() - 500;
$(window).scroll(function(){
if( $(window).scrollTop() > stickTop && $(window).scrollTop() < stickBottom) {
$('.sidebar-stick').css({opacity: '1'});
$('.stick-dummy').css('display', 'block');
} else {
$('.sidebar-stick').css({opacity: '0'});
$('.stick-dummy').css('display', 'none');
}
});
根据您要创建的效果,您可能还需要考虑窗口高度。