如何让我的箭头文本留在 fullpage.js 上的正确位置？答案

【问题标题】：How do I get my arrow text to stay in the right place on fullpage.js?如何让我的箭头文本留在 fullpage.js 上的正确位置？
【发布时间】：2014-01-14 21:47:09
【问题描述】：

我是新来的，我正在寻找困扰我的问题的答案。我正在为客户开发一个网站，它使用 fullpage.js .....您可以在 http://begemini.co.uk/workshop/loweclothing/index.html 看到该网站

问题是箭头旁边的文字有问题。我无法让正确的文本停留在“slide1”上我尝试使用“位置：固定”，但它停留在正确的位置，但它在每张幻灯片上，我需要在每张幻灯片上使用不同的文本......

html代码为：

    <body>
<div class="section" id="section1">
    <div class="slide" id="slide1"><img src="imgs/Lowe-Clothing-logo.png" width="30%">
            <div id="left-text">Business Opportunities</div><!--left-text-->
  <div id="right-text">Introduction</div><!--right-text--></div><!--Slide1-->
    <div class="slide" id="slide2"><h1>Totally customizable</h1></div><!--Slide2-->
</div>


</body>

而css是：

#left-text{
    position: absolute;
    top: 50%;
    left: 60px;
    margin-top:-9px;
    font-size: 1.1em;   
    font-family: arial,helvetica;
    color: #fff;
 }

 #right-text{
    position: absolute;
    top: 50%;
    right: 60px;
    margin-top:-9px;
    font-size: 1.1em;   
    font-family: arial,helvetica;
    color: #fff;
    z-index:100;
 }

所以基本上我试图将文本放置到箭头上，但要与其余内容一起过渡。我希望每页上的箭头旁边有不同的文字。您可以下载整个站点here 以查看整个代码。

任何帮助将不胜感激.. 谢谢，抢

【问题讨论】：

您是否尝试过相对而不是固定？
我做了，但也没有用。它使它们保持在同一张幻灯片上，但是它们完全进入了错误的位置，并且在调整屏幕大小时无法正常工作：/
我已经上传了位置为：relative on的网站

标签： javascript jquery html css fullpage.js

【解决方案1】：

首先尝试仅使用一种 css 单位，即仅像素或仅 em。

试试这个，然后使用相对或绝对，试试它是否有效。

【讨论】：

我只使用 em 作为字体大小，一切都以 px 排列，absolute 将正确的文本放在另一张幻灯片上......
文本需要在容器中还是整个幻灯片需要“换行”？
正确我已经设法让它们在屏幕最大化和正常缩放时停留在正确的位置，但是当我更改屏幕尺寸或放大时它们会四处移动......新网站在begemini.co.uk/workshop/loweclothing/index.html

【解决方案2】：

逻辑似乎是错误的。

尝试位置：相对而不是固定或绝对并将 top、left 和 right 设置为 auto 或 x%。

该键应与位置、顶部、左侧和右侧一起使用。

【讨论】：

我尝试了 relative，但我似乎无法将它们放在正确的位置，并且当我调整屏幕大小时它们不会留在正确的位置

【解决方案3】：

要更改每张幻灯片的文本，您应该使用插件提供的回调。在这种情况下，您需要使用回调 afterSlideLoad

这样您就可以使用 jQuery 来决定要为每张幻灯片添加哪些文本，例如：

$('textLeft').text('demo');
$('textRight').text('demo');

为了正确定位文本，您可以使用绝对定位，因为这些部分有position:relative。

【讨论】：