我是一名中级网页设计师,刚刚重新设计了一个 wordpress 网站,创建了我自己的主题。
我已经实现了一个 jQuery StickyPanel 来拥有一个与页面保持一致的顶部菜单栏。如果我将菜单栏放在 margin-top: 1px ,它工作正常,但显然我有一个像素的空间显示。
如果我将粘性菜单放在 margin-top:0px,它会正常工作,但是当我再次位于页面顶部时它不会分离,并且不会让我滚动到完整的 100%。
该网站现已上线,我已将边距设置为 1px,因为这是两者中更好的选择,但理想情况下我需要该像素消失!
如果我制作一个测试 .html 页面,它工作正常,这是由于 WordPress 调用 header.php 或据我所知......但就像我说的那样,我是中间人,我的搜索和试用而且错误还没有找到解决办法。
该网站是 www.therayandthero.com
我的粘性面板的 CSS 是
#menu {
margin: 0 auto;
margin-top: 1px;
text-align: center;
height: 23px;
padding: 4px 4px 4px 4px;
box-shadow: 2px 1px 1px rgba(0,0,0,0.1);}
#menu.fixed {
position: fixed;
width: 99%;
background-color: black;
color: #e5e6d9;
z-index: 9999;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px -1px 2px rgba(0,0,0,0.2);}
我的代码实现在header.php后面,如下:
<div id="top"></div>
<div id="menu" class="sticky">
<div id="toplogo"><a href="http://www.therayandthero.com"><img src="http://www.therayandthero.com/wp-content/themes/randrtwopointoh/images/rrsill_off.png" class="rollover"></a></div>
<div id="toptext"><h1><a href="mailto:therayandthero@gmail.com">CONTACT</a></h1></div> <div id="toptext2"><h1><a href="#caro">CATEGORIES</a></h1></div>
<div id="search-box"><?php get_search_form(); ?></div>
</div>
<div id="wrapper"> <!-- wrapper -->
<div id="topad">...
我不知道您是否需要查看更多代码才能执行此操作...如果需要,请告诉我,我会很乐意向您展示您的需求。
提前谢谢你的帮助!