在页面底部显示div

时间:2015-04-28 21:37:01

标签: javascript jquery html css

现在,当我向下滚动时,我向上滚动并隐藏时显示了页脚。 当我在页面底部时,如何让它出现?

https://jsfiddle.net/48az3u64/

// Hide Footer on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('footer').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    if (st > lastScrollTop && st > navbarHeight){

        $('footer').removeClass('nav-up').addClass('nav-down');
    } else {

        if(st + $(window).height() < $(document).height()) {
            $('footer').removeClass('nav-down').addClass('nav-up');
        }
    }

    lastScrollTop = st;
}

1 个答案:

答案 0 :(得分:1)

请参阅此小提琴https://jsfiddle.net/48az3u64/9/

我只添加了帖子How do you know the scroll bar has reached bottom of a page

中找到的函数IsBottom()
function IsBottom() {
    return $(window).scrollTop() == ($(document).height() - $(window).height());
}

在滚动时添加您的导航类,并禁用您的计时器。

我强烈建议不要使用计时器进行此类操作,因为即使没有任何滚动,您每四分之一秒处理一次功能。你应该直接在scroll事件中调用你的hasScrolled()并使用debounce函数来解决它太多问题。以下是有关去抖动的更多信息的链接

http://davidwalsh.name/javascript-debounce-function