1 https://codepen.io/Funsella/pen/yLfAG

Question

我在我的投资组合网站上工作，它基于fullpage.js和WordPress。我希望通过更改自定义“背景颜色”来修复背景。

我使用自定义字段为每个帖子添加不同的“背景颜色”。
我在整页内更改可见部分（帖子）的班级名称脚本，可见帖子让课程“活跃”。

我知道fullpage.js不允许使用固定元素，因此我必须在整页包装器之外放置一些“背景”div（以及WordPress循环）。我不知道如何将“背景颜色”从可见（类“活动”）部分复制到单独div中的固定背景。有一些可能性：

使用js / jQuery将CSS“background-color”值从一个（类“active”）div复制到另一个（固定背景div），但必须动态完成。怎么样？我找到并测试的所有脚本只对第一个“活动”背景颜色起作用，当部分更改（另一个div为“活动”）时，固定背景仍然具有第一个活动部分背景颜色。
或在循环外使用带有自定义查询的php - 但我不知道如何使用特定的类名“active”进行过滤。我只有基本的脚本：
```
style="background-color:<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'background', true);
wp_reset_query();
```

如何为“活动”类添加过滤器？

还有其他想法吗？救命啊！

EDIT2 ：我找到了两个可以满足我需要的脚本：

1 https://codepen.io/Funsella/pen/yLfAG

2 https://codepen.io/Funsella/pen/dpRPYZ

都会更改背景颜色，将其从“source”div复制到第二个“target”div。我可以在wordpress循环（fullpage wrapper）中保留“source”div，并将背景颜色值传送到WP循环和fullpage之外的固定背景div。第一个脚本适用于滚动事件 - 所以它可能不适用于不滚动内容的fullpage.js插件。但是第二个脚本完全符合我的需要。我测试了它。

所以问题是：它能以更简单的方式完成吗？没有额外的jQuery插件（in-view.js）？只是简单的JS或jQuery？

Answer 1

因此，您将在一个页面上显示各种博客文章，并希望每个博客都有自己的背景颜色，对吗？如果是这样，请尝试fullpage.js'sectioncolor选项。

你可以在这里阅读 https://github.com/alvarotrigo/fullPage.js#options

以下是该页面的示例：

$('#fullpage').fullpage({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

文档并没有准确解释这里发生了什么，但看起来你只是按照它们出现的顺序发送一系列剖面颜色。

基于评论的编辑：

从你的照片中我想我更清楚你想要做什么。基本上你需要一个幻灯片图层（透明）和一个固定的背景图层（活动幻灯片的颜色）。首先，这个parallex示例是你想要实现的吗？ https://alvarotrigo.com/fullPage/extensions/parallax.html#firstPage

如果是这样，回购中有一个基本的例子。如果这不能完全达到您要执行的操作，请按照以下说明操作：

使用onLeave或afterLoad回调向您的网站发出ajax请求。
使用您的帖子ID查询您的帖子，以检索帖子属性背景。
检索背景颜色并设置/淡入背景颜色属性。

这是一个使用jQuery的非常简单的ajax请求示例：

//set the function to perform for onLeave in the options
onLeave: goGetThatColor(index)

//not in your options
function goGetThatColor(index){
    $.ajax({
      method: "POST",
      url: "get_post_color.php",
      data: { id: index }
    })
      .done(function( color ) {
        $(#background-element).css('background-color', color);
      });
}

我只是基于文档，传入的索引可能是任意排序或来自Wordpress的帖子ID。我不确定，所以你可能必须从dom中的属性中获取帖子ID。

动态背景颜色变化

1 https://codepen.io/Funsella/pen/yLfAG

2 https://codepen.io/Funsella/pen/dpRPYZ

1 个答案: