Question

我一直在尝试使用SMINT创建一个浮动菜单。这意味着如果向下滚动页面，菜单就会保持不变问题是，正如您在代码中看到的那样，菜单由divs组合而成我想要一个分为li和ul的常规菜单，所以我试图更改divs，但代码不一样 - 他不是'当我向下滚动页面; Demo时，请保持警惕我知道可以使用ul lis创建一个菜单，因为我在 Infinity Network Floating Code 看到了菜单。它是用列表制作的，当你向下滚动时它是浮动的所以如果代码不能正常工作，我必须在代码中做错。

问：在我的代码中我做错了什么，或者我该怎么做才能使它工作？
提前谢谢。

Answer 1

你缺乏javascript逻辑以使其工作。您必须检测用户何时滚动，并且当他或她停止滚动时，更新菜单的位置。

为您的<ul>提供ID：

<ul class="subMenu" id="submenu">

将position: absolute和z-index添加到subMenu班级：

.subMenu {
    position: absolute;
    z-index: 100;
}

然后在页面末尾添加以下脚本：

var submenu = document.getElementById('submenu');
var scrollTimer;
window.onscroll = function() {
    submenu.style.visibility='hidden';
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        submenu.style.visibility='visible';        
        submenu.style.top=parseInt(scrollTop)+'px';
    }, 500);
}

此方法还可以为您提供所需的延迟效果（尝试使用超时值进行实验）。

看小提琴（缺少一些造型） - ＆gt;的 http://jsfiddle.net/puzN4/

Answer 2

在您的示例中，您只需将.submenu设置为position:fixed和z-index:99999

创建浮动菜单

2 个答案: