滚动时，WP响应主题的标题将无法正确保留在顶部; position：fixed和width：任何％都会将其抛出

Question

我正在研究的WP响应主题：

http://www.wpexplorer.me/tetris/

我使用Firebug for Firefox浏览器addon thingy进行更改，然后再搞乱实际文件。所以如果你有它或类似的东西，你会看到通过添加position：fixed;在#header部分，标题宽度缩小超过其原始大小的一半，导航菜单在新的缩小空间内被抬起。

我已将其他编码片段添加到#header部分，如width：100％;，width：959px;和其他百分比和像素，这会混淆布局;特别是当您将窗口调整到适合平板电脑和移动设备时的大小时 - 这一切都没有了。我无法获得此主题的粘性标题功能或正确。哦，我还添加了z-index：200; #header部分和边距：160px 0;到#main-content;这些不会给我带来问题。

添加宽度：; #main-content的代码似乎也没有帮助（我在网上看到这是宽度代码所在的地方）。

无论如何，有没有人知道我需要什么代码才能使这个主题的标题向上滚动，直到它到达页面的顶部，它变为粘性/静态/固定/顶部（无论它的实际术语是什么）每时每刻？并且，当窗口大小调整到移动设备的大小时，你可以使用布局吗？

感谢。

Answer 1

这应该有效

#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}

位置固定在顶部，使用0表示z-index：999然后需要设置内部容器预标题960px的宽度以匹配其余部分。

您需要为已设置的其他尺寸设置媒体查询。轻松，享受。

如果您希望菜单本身而不是社交图标成为没有社交图标的顶部固定栏，那么您希望进行jquery滚动CSS更改，以便#header成为固定位置。

使用固定标题和社交：

使用Jquery Scroll CSS更改时，没有社交栏工作的说明：

这就是我的方式，我会将菜单向下移动，并将社交图标添加到菜单本身。 （下面是我的意思截图，社交图标减少到75％）

PS。社交图标非常突出，所以我会添加一个CSS3 Greyscale，当访问者在它们上面盘旋时，它会打开颜色并产生过渡效果。 希望这会有所帮助;）