1

我正在使用 wordpress 创建一个网站（http://yic.am），主题包括背景和“subpage_content_bg”。subpage-background 是一个半透明的白色背景，围绕着内容，使其更易于阅读。我希望子页面背景变成position:fixed而不是position:absolute向下滚动时，这样当它到达页面顶部时，它会随着页面滚动。

当主题是实际帖子或页面中的图片、评论框或文本时，我发现有几页描述和演示了该功能。但是，我似乎找不到图片何时是 CSS 样式表的一部分的描述。

样式表中的子页面提取如下所示：

#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>

这种方式首先加载 jQuery 库，因为很可能所有其他 javascript 文件都依赖于它。然后加载插件，最后加载您的自定义文件，因为这可能取决于首先加载的一些早期插件 - 例如，您的自定义文件可能想要调整加载到您的一个插件中的幻灯片文件。

如果出于任何原因，您无法编辑模板文件的头部以添加您的 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>

希望这有助于为您指明正确的方向。哦，记得将旧的“文档就绪”gubbins 添加到 jquery.custom.js 文件中......

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