通过使用scrollTop()使用jquery浮动菜单

Question

我是第一次接触jquery，昨天我尝试用jquery制作我自己的浮动菜单，因为我用css不能得到满意的结果。但是我写的代码不起作用。你们能告诉我我哪里做错了吗？

我想要做的是，当我降低几个像素时，菜单应该重新出现，并保持在顶部。

下面是我使用的jquery代码：

var menu = function(){
    var x=$(body).scrollTop();
    if(x>10){
        $('header').animate({position:fixed},100);
    }
    else{
        $('header').animate({position:static},100);
    }
}

$(document).ready(menu);

Answer 1

您还需要侦听scroll事件(也许resize也会有所帮助)

$(window).on("resize scroll", menu);

$(body)应为$("body")、$(document)或$(window)。

static和fixed (不是变量，因此使用字符串) "static" "fixed"

You 不能为 position设置动画。

改为使用 .css() ：

function menu() {
    var x = $(window).scrollTop();
    $('header').css({position: x>10 ? "fixed" : "static"});
}
$(document).ready( menu );
$(window).on("resize scroll", menu);

附注:确保你的选择器header是一个真正的<header>，而不是像<div id="header">那样的东西，它应该是用作选择器的ID #header。