2012-04-03 16 views
0

私は中間レベルのWebデザイナーです。自分のテーマを作成するWordPressのサイトを再作成しました。WordPressのjQuery StickyPanelの問題

jQuery StickyPanelを実装して、トップメニューバーをページに残しました。私がメニューバーをmargin-top:1pxに置いてもうまくいきますが、明らかにスペースのピクセルがあります。

stickyメニューをmargin-top:0pxに配置すると、正常に機能しますが、ページの一番上にいるときには切り離されず、完全にスクロールできなくなります100%。

サイトは現在公開されていますが、これは2つのオプションのほうが良いので1ピクセルにマージンを設定しましたが、理想的にはそのピクセルが必要です。

テスト用の.htmlページを作成するとうまくいきます。header.phpなどのWordPressの呼び出しで起こっていることです。私が言うことができる限り...しかし、私が言ったように、私は中間です。私の検索と試行錯誤はまだ解決策を見つけることができませんでした。

サイトです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:[email protected]">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">... 

これを行うためにコードをもっと見る必要があるかどうかわかりません...もしそうなら、私に教えてください。私はあなたに必要なものを喜んで表示します。

ご協力いただきありがとうございます。

+0

Stack Overflowは英語のQ&Aサイトです。自分を参照するときは「I」を大文字にしてください。 ** I ** **の代わりに** i **を書くべき時は決してありません。 – meagar

答えて

0

あなたのウェブサイトはヴァリデではありません。 http://validator.w3.org/check?uri=http%3A%2F%2Fwww.therayandthero.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2

これは問題ではありませんが、いくつかのタグが近くにない場合は、JavaScriptとCSSは動作しないことができます。 問題がたくさんある場合は、Webkitのcss/htmlインスペクタまたはfirefoxのfirebugを使用してください。