Question

我正在尝试制作一个粘贴在页面底部的菜单，然后滚动到顶部。唯一的问题是，不是滚动页面，菜单停留在同一个地方，然后跳到最后的右上角。

我也在网站上运行stellar.js，我想知道这是否有冲突但是我删除了调用的javascript并且问题仍然存在，所以我把它放回去了。

网站网址为www.percolatedpropaganda.co.uk

我很难过，任何帮助都会非常感激！

的Javascript

$(document).ready(function() {
   var windowH = $(window).height();
   var stickToBot = windowH - $('#menu').outerHeight(true);

    $('#menu').css({'top': stickToBot + 'px'});

   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > stickToBot ) {
            $('#menu').css({'position':'fixed','top' :'0px'});
        } else {
            $('#menu').css({'position':'absolute','top': stickToBot +'px'});
        }
    });
 });

CSS

#menu {
    font-size: 85%;
    position: relative;
    float: left;
}

Answer 1

你为什么不试试这个：

使用Javascript：

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > 0 ) {
            $('#menu').css({bottom: '', top :'0px'});
        } else {
            $('#menu').css({top: '', bottom: '0px'});
        }
    });
 });

CSS：

 #menu {
   position: fixed;
   bottom: 0;
 }

检查出来：Example

更新：
如果您想要对动画进行动画处理，请改为使用：

Javascript：

$(document).ready(function() {
   var menu = $('#menu');
   var windowH = $(window).height();
   var stickToBot = windowH - menu.outerHeight(true);
   menu.css('top', stickToBot + 'px');

    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
       if ( scrollVal > 0 ) {
            menu.stop().animate({top :'0px'});
        } else {
            menu.stop().animate({top: stickToBot + 'px'});
        }
    });
 });

CSS：

 #menu {
   position: fixed;
 }

看看：Example

更新2：

如果您想要cwtchcamping.co.uk ...请看一下：

使用Javascript：

$(document).ready(function() {
   var menu = $('#menu');
   var windowH = $(window).height();
   var stickToBot = windowH - menu.outerHeight(true);
   menu.css('top', stickToBot + 'px');

   $(window).scroll(function() {
     var scrollVal = $(this).scrollTop();
     if (scrollVal > stickToBot) {
       menu.css({top: '0px', position: 'fixed'});
     }
     else {
       menu.css({top: stickToBot + 'px', position: 'absolute'});
     }
   });
 });

CSS：

#menu {
  position: absolute;
}

示例：JSFiddle

Javascript菜单从下到上跳转而不是滚动

1 个答案: