Question

每次滚动条到达粘性菜单时，它会将菜单移动几个像素。如果您在my website上慢慢向下滚动并观看菜单，则可以看到它。

我正在使用JQuery插件stickUp来完成粘性菜单。我发现只有这样我才能让菜单坚持到顶部而不跳到左边是将“按钮”类放在另一个名为“menu”的类中，并将“menu”的宽度设置为100％。但这只会导致你现在可以看到的微小跳跃。

<body>
<div id="page1">
    <div id="p1content">
        <h id="Name">Travis Morenz</h>
        <p>Testing & Testing</p>
    </div>
    <div class='menu'>
        <div id='buttons'>
            <div><a href="#page1" class="btn">Home</a></div>
            <div><a href="#page2" class="btn">Projects</a></div>
            <div><a href="#" class="btn">About</a></div>
        </div>
    </div>
</div>
<div id="page2">
    <div class='behindmenu'></div>

</div>

我尝试设置JFiddle以便于查看，但粘性菜单无法在其中运行。

然而，代码是相同的。任何帮助将不胜感激。

Answer 1

在您的网站中，当您向下滚动.menu stuckMenu isStuck时，获取样式并获得位置：固定且顶部：0但您必须添加左：0px然后div不会移动。

只需添加左：0px到.menu stuckMenu isStuck即可。如果它没有帮助或更多解释，请告诉我。

<强>已更新当你向下滚动然后按jquery时，有一个类添加到.menu stuckmenu并且它给出了position:fixed和top：0意味着将div固定在一个地方所以你应该使用left删除左边部分：0 so它将位于屏幕的中心。（上：0和左：0）。我会在得到更多澄清后立即更新答案。

<强> OFFTOPIC 您的第2页内容将隐藏按钮，但如果您将悬停，那么它将看起来像错误，所以我有一个建议，在.menu stuckMenu类添加background:white，它会看起来很棒..希望它会有所帮助。：）

在此ID #p1content中，您使用的css不是很好..要使此列居中，您应该使用宽度为80％的margin-left:auto margin-right:auto，并且您的列也会响应。永远不要使用固定宽度，这不是好习惯。

Answer 2

当你向下滚动时，位置变为position: fixed;，它会被移动，然后忽略身体的边缘，使自己的边距更大。

CSS

body {
   margin: 0;
}

Answer 3

关于你的问题，为什么它正在移动：它收到了一些额外的风格。剩下8px的位置。

见截图。

此插件似乎会将位置从相对位置更改为固定位置。

此外，它还增加了顶级和左侧属性。

JQuery问题：Sticky菜单在粘贴

3 个答案: