私は中級レベルの Web デザイナーで、自分のテーマを作成するワードプレス サイトを作り直しました。
jQuery StickyPanel を実装して、ページに表示されるトップ メニュー バーを作成しました。メニュー バーを margin-top: 1px に配置すると、正常に動作しますが、明らかにスペースのピクセルが表示されます。
スティッキー メニューを margin-top:0px に配置すると、適切に機能しますが、ページの上部に戻ったときに切り離されず、100% までスクロールできません。
サイトは現在ライブであり、余白を 1 ピクセルに設定しました。これは 2 つのオプションよりも優れていますが、理想的にはそのピクセルをなくす必要があります!
テスト用の .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">...
これを行うためにコードをもっと見る必要があるかどうかはわかりません... もしそうなら、お知らせください。必要なものを喜んでお見せします。
事前に助けてくれてありがとう！