Question

我正在尝试将菜单加载固定到页面底部（position:absolute;bottom:0px;），但是当用户滚动时，我希望它固定在顶部（position:fixed;top:0px;）。< / p>

这是我的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

我还没有能够成功添加顶级课程。

有什么想法吗？谢谢！

Answer 1

你将大写字母混淆了，并且你没有将jQuery包含在你的JSFiddle中。这是更新的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);

Answer 2

你也应该终止你的陈述，你的第一个jsfiddle没有js库加载。

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滚动然后修复

2 个答案: