1

wordpress を使用して Web サイト ( http://yic.am ) を作成しており、テーマには背景と「subpage_content_bg」が含まれています。サブページの背景は、読みやすくするためにコンテンツを囲む半透明の白い背景です。下にスクロールするときposition:fixedの代わりにサブページの背景になりたいので、ページの上部に到達するとページと一緒にスクロールします。position:absolute

件名が実際の投稿またはページ内の画像、コメント ボックス、またはテキストである場合の機能について説明およびデモしているページをいくつか見つけました。ただし、画像がcssスタイルシートの一部である場合の説明が見つからないようです。

スタイルシートからの subpage-extract は次のようになります。

#sp .content_wrapper_sbl {
    width:940px;
    min-height:320px;
    margin:-107px auto 0;
    padding:45px;
    position:relative;
    z-index:20;
    background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
            }

関数の JavaScript はどこに配置すればよいですか (上記のリンクの関数を使用しようとしています)。すべてのページと投稿（表紙を除く）に適用したい

サブページの画像を関数のターゲットにするにはどうすればよいですか? #spまたはcontent_wrapper_sblターゲットにすることは可能ですか？

私は何度もさまざまなことを試してきましたが、ウェブデザインとコーディングは初めてです。必要な情報がすべて含まれていることを願っています。

私が取り組んでいるコードはこれです: http://jsfiddle.net/EahRx/870/

4

1 に答える 1

0

そのフィドルにかなり釘付けになったようですね。JavaScriptファイルをどのように配置するかは個人的な好みだと思います。個人的には、Google ライブラリを使用して jQuery をロードするのが好きです...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

次に、使用している可能性のある他のプラグインをロードします...

<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>

そして最後に、私は通常、カスタム jQuery ファイルを作成し、それを「jquery.custom.js」と呼びます...

<script src="http://www.mydomain.com/js/jquery.custom.js"></script>

したがって、最終的な JavaScript インクルード リストは次のようになります...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>

この方法では、他のすべての JavaScript ファイルが jQuery ライブラリに依存する可能性が高いため、最初に jQuery ライブラリがロードされます。次に、プラグインがロードされ、最後にカスタム ファイルがロードされます。これは、最初にロードされる以前のプラグインのいくつかに依存する可能性があるためです。たとえば、カスタム ファイルは、プラグインの 1 つにロードされたスライドショー ファイルを微調整する必要がある場合があります。

何らかの理由で、テンプレート ファイルの先頭を編集して JavaScript インクルードを追加できない場合は、次のように HTML の末尾に追加できます...

<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>

<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>

これがあなたを正しい方向に向けるのに役立つことを願っています。ああ、古い「ドキュメント対応」ガビンも jquery.custom.js ファイルに追加することを忘れないでください...

$(document).ready(function(){
    [YOUR JQUERY HERE]
});
于 2013-05-31T12:39:55.867 に答える