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

<强> jsBin demo

您还需要收听scroll事件（也许resize也有帮助）

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

$(body)应为$("body")或$(document)或$(window) static和fixed（不是变量，因此请使用字符串）"static" "fixed"

您无法制作动画 position 改为使用.css()：

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

PS：确保您的选择器header真的是<header>而不是<div id="header">，而不应该是用作选择器的ID #header。

使用scrollTop（）使用jquery浮动菜单

1 个答案: