问题标签 [onepage-scroll]

情况是，我目前正在为客户从头开始创建一个网站，一个要求是 Wordpress，布局是“一页布局”。由于这是我为 wordpress 开发临时主题的第一个项目，因此我对这里有经验的用户用来实现 One Page 功能的方法有疑问。

因此，我通过以下方式实现了此功能：

1 - 创建主页的子页面，并分配与部分匹配的页面模板（团队，英雄，关于，联系人......）。我认为缺点是每个差异部分的自定义标签，客户难以管理，wordpress“页面编辑器”缺乏功能。

2 - （使用的方法）创建了一个“单页模板”，并为这些部分实现了一个小部件区域（侧边栏），并为将小部件添加到 wordpress 仪表板的团队创建了一个自定义插件，然后用户可以将它们添加到“ Widgets > One Page Area”，并编辑每个部分的内容。优点，客户更容易管理小部件并在主页中排序部分。缺点，我认为这不是使用小部件实现单页功能的“好”方式。

所以，我想知道您在 wordpress 主题开发中以何种方式实现单页功能。

PS：我不想使用已经创建的插件，因为它也适用于大学，他们不希望我使用其他开发人员插件。

我使用One Page Scroll进行全屏轮播。我想data-attribute在分页中显示。到目前为止，我能够在分页中显示幻灯片的数量。我怎样才能进入data-attribute分页？

在这里，我想在分页中显示年份。

HTML

JavaScript

嗨 Stackoverflow 研究员，

我想创建一个页面滚动的网站，但我不想使用任何外部库。所以我想出了这种技术，它非常适合本地测试，但我想知道这段代码是否合乎逻辑，或者这可能在整个网站中存在潜在问题。我之所以问，是因为在我的搜索中，我没有为单页网站找到这种方法，我想知道为什么不这样做。所以请指出我正确的方向。欢迎任何建议或意见。谢谢你的支持。https://jsfiddle.net/emalik/xpvt214o/539446/

我目前正在开发一个项目网站，并且是一个单页网站，而且我是 Bootstrap 3 的新手，所以我仍在使用一些启动模板。我现在遇到的问题是我不知道如何放置客户想要的有效但复杂的汉堡菜单：

• 当用户在主页或页眉/轮播时，单独的汉堡菜单应该在屏幕右上角的透明导航背景上（而不是在边缘）。
• 当您向下滚动一点时，标题中的这个标题汉堡菜单应该隐藏或只是向上固定。
• 当您在标题之后向下滚动时，应该出现预期的黑色导航栏，固定在顶部，它应该更早地扩展小导航栏，然后变成一个全屏 100% 宽度的栏，右侧是汉堡菜单，公司徽标在左边。
• 单击汉堡菜单时，屏幕右侧会出现一个导航框。

这是我的 HTML：

我目前正在使用 Bootstrap 3 标准模板，因为我想在迁移到 4 之前了解更多关于它的信息。这是我的 CSS：

这就是我现在正在为菜单工作的全部内容。我本来想为这些东西创建新的类，所以我不会依赖 Bootstrap 模板，我可以尽快编辑它而不会搞砸。

我使用fullpage.js，当我创建一个链接并将其链接到一个 id 时，它工作正常，但是当我想再次向上滚动时，我不能这样做。

HTML：

jsfiddle

目标：在不使用任何插件的情况下获得整页正面和反向滚动。 我尝试了什么：请单击此JSFiddle 链接以获取我的代码

我面临的问题：前滚动（从上到下）工作正常，你可以检查小提琴。但是反向滚动（当我们从下到上返回每个 div 时）会导致问题。它挂在两个div之间。我已经注释掉了小提琴中的一段代码，这是我试图获得反向滚动的代码：

我正在使用这个小 jQuery 插件，以便平滑滚动到页面上的特定位置并标记当前活动的菜单项，因此当您向下滚动时，您会看到您在菜单中的位置。

现在我基本上有与 GitHub 页面上完全相同的代码（至少我找不到差异），但它不起作用，虽然在原始模板（我正在使用）上它正在工作，所以插件本身似乎工作正常，但我似乎无法找到问题所在。

基本上我有我的菜单：

然后我有不同的部分/div，就像这样：

现在真正奇怪的是，滚动导航栏工作正常，所以如果我点击联系人，例如，它会滚动到正确的位置。但是当我滚动自己时，会标记错误的项目，总是落后一个，所以如果我在上面，那么会标记“功能”，如果我真的滚动到了功能，那么会标记成本，等等上...

您可以在这里看到这一点。

请忽略没有出现图标、拼写错误或其他任何错误，我只是在测试或刚刚开始开发。在那里，您可以完美地检查行为，还可以检查id似乎完全适合的部分/div 的 s（否则，滚动导航栏不应该工作）。

任何人都可以告诉问题？我不明白...

我正在玩菜单创意。我的 JS 知识很少，所以我想知道我想要实现的目标是否可行。

我一直在玩 codrops这个菜单的多框菜单

从外观上看，菜单旨在链接到外部页面，我想做的是链接到同一页面内的部分，因为我希望构建一个单页网站，所以我需要的是菜单在何时关闭单击菜单链接之一，因为当前它只是保持打开状态。

我曾尝试从链接中的关闭按钮中使用相同的“类”功能，但由于某种原因，这会使关闭按钮消失，而不是有效的解决方案。

我查看了发布的类似问题并尝试使用以前的答案进行修复，但我没有运气。

我试图获取这行代码并将其从 JS 文件中复制this.DOM.closeCtrl.addEventListener('click', () => this.close());并更改closeCtrl并替换它，mainLinks但是这没有用，老实说，我完全不知道我在做什么。

我想这对于了解 JS 的人来说是一个相当简单的解决方法。希望您能提供帮助。谢谢

我想为一页构建面包屑。

我想知道是否有某种方法可以通过滚动站点来更改标题中的标题。

当屏幕 1 处于活动状态时，显示屏幕 1 的标题。

当屏幕 2 处于活动状态时，显示屏幕 2 标题。

请告知任何插件或案例。（文字出版社）

关闭某些模式弹出窗口时，页面跳转到顶部。

注意：我使用 Wordpress 构建了这个页面，使用了自定义 HTML 和 Beaver Builder 网站构建器的组合。Wordpress 主题是 Astra。

链接到有问题的页面： http ://retirementinsuranceoptions.com/consuelo-avila

进入网页后，单击“预订”选项导航到我遇到问题的部分。您会注意到，当您单击“预约”或“安排聊天”，然后关闭这些弹出窗口时，页面将跳转到屏幕顶部。

但是，如果您单击“向 Consuelo 提出问题”，然后关闭弹出窗口，则页面不会滚动（这是我对所有其他模式弹出窗口感兴趣的实现）。

您看到的所有按钮都是带有 href="#0" 样式的锚标记。

我确实注意到了一种模式...“Ask A Question”按钮的弹出窗口包含一个表单（来自 Wordpress 插件，Ninja Forms），它是我网站服务器上的本地资产。“预约”和“安排聊天”的弹出内容<iframe>是<script>从外部来源（Acuity Scheduling）提供的。我只是为模态弹出内容嵌入他们的代码。（在下面提供，但为了隐私而受到审查）。我不确定这是否/为什么会使页面跳转，但认为值得一提，因为这些弹出窗口是唯一使页面跳转的弹出窗口。

最后，我也在页面上使用了一个名为“page scroll to id”的 Wordpress 插件，但我尝试停用它并没有任何区别，所以我认为可以肯定地说这个插件没有影响这个问题。

按钮的 HTML： <div id="button-only-div"> <a id="bio_book" class="ask-a-question push_button red" style="text-align: center;" href="#0">Book An Appointment</a><br /> <a id="bio_chat" class="ask-a-question push_button red" style="text-align: center;" href="#0">Schedule A Chat</a><br /> <a id="bio_question" class="ask-a-question push_button red" style="text-align: center;" href="#0">Ask Consuelo A Question</a> </div>

Acuity Scheduling 嵌入的代码： <iframe src="https://app.acuityscheduling.com/schedule.php?(censored)" width="100%" height="800" frameBorder="0"></iframe> <script src="https://(censored).acuityscheduling.com/js/embed.js" type="text/javascript"></script>

预期/期望的结果：关闭模式弹出窗口时没有“滚动到顶部”。

实际结果：有些弹出窗口会导致页面滚动到顶部，有些则不会。

（我在过去一年左右一直在学习编码。我喜欢它，但我还有很多东西要学！提前谢谢！）