jQuery滚动然后修复 [英] jQuery scroll then fixed

问题描述

我试图将菜单加载固定在页面底部(position:absolute;bottom:0px;)，但是当用户滚动时，我希望将其固定在页面顶部(position:fixed;top:0px;).

I am trying to make a menu load fixed to the bottom of the page ( position:absolute;bottom:0px; ), but when the user scrolls, I want it to get pinned to the top ( position:fixed;top:0px; ).

这是我的jQuery:

Here is my jQuery:

var main = function(){
    var menu = $('#menu')

    $(document).scroll(function(){
        if ( $(this).scrollTop() >= $(window).height() - menu.height() ){
            menu.removeclass('bottom').addclass('top')
        } else {
            menu.removeclass('top').addclass('bottom')
        }
    })
}
$(document).ready(main);

这是我的 JSFiddle

我尚未能够成功添加顶级课程.

I have yet to be able to successfully add the top class.

有什么想法吗?谢谢！

推荐答案

您混用了大写字母，并且没有在JSFiddle中包含jQuery.这是更新的JSFiddle. http://jsfiddle.net/tb2ume6v/1/

You had the capitalization mixed up, as well as you didn't include the jQuery into your JSFiddle. Here's the updated JSFiddle. http://jsfiddle.net/tb2ume6v/1/

var main = function(){
    var menu = $('#menu')

    $(document).scroll(function(){
        if ( $(this).scrollTop() >= $(window).height() - menu.height() ){
        menu.removeClass('bottom').addClass('top')
        } else {
        menu.removeClass('top').addClass('bottom')
        }
    })
}
$(document).ready(main);

这篇关于jQuery滚动然后修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！