【问题标题】:Elementor Sticky Scroll Down ButtonElementor 粘性向下滚动按钮
【发布时间】:2021-09-17 08:56:46
【问题描述】:

我尝试过 Lottie 小部件和 html 小部件,但它们只允许您滚动到单个部分(向上或向下)。我想做的是一个粘性按钮,每次点击都可以从一个部分跳到另一个部分(在单页网站上一个接一个地通过所有部分)。这是我从中获得灵感的网站:Brightwoodlp.com。我还是一个初学者,所以任何更简单的技巧都会有很大帮助。

【问题讨论】:

标签: wordpress elementor onepage-scroll


【解决方案1】:

您在问题中链接的网站中的按钮不是粘性的(如position: sticky),而是fixed(如position: fixed)。这意味着如果您通过toprightbottomleftmargin 等属性移动它,该元素将位于正常元素流之外并保持不变。

你可以在一个元素上设置一个固定的位置,比如一个按钮,并使用这样的 CSS 将它水平居中:

.your-button {
  position: fixed;
  z-index: 1;
  left: -50%;
  bottom: 2rem; /* or whatever distance from the bottom you prefer */
  width: 3.2rem; /* or whatever width you prefer */
}

【讨论】:

  • 谢谢,我明白你的意思了。不过,我的主要担忧仍然存在:每次单击时,它会从第 1 节滚动到第 2 节,然后从第 2 节滚动到第 3 节等吗?
  • 这表明我误解了并且仍然不完全理解您的原始问题,尤其是“从一个部分跳到另一个部分”的含义。固定元素不会自行移动,它们相对于视口定向,就像链接示例中的按钮一样。
  • 设置固定位置不是问题。连接 5 个部分是问题所在。我如何定义它?您发布的代码不包含任何部分连接。您如何“告诉”按钮从第 1 节转到第 2 节,然后从第 2 节转到第 3 节,然后从第 3 节转到第 4 节,然后从第 4 节转到第 5 节。如果您查看链接的网站,您可以看到。每次单击按钮时,都会出现下一部分。我怎样才能做到这一点?我希望现在很清楚。
  • 那我帮不了你。你的问题措辞错误,情况似乎可以归结为你试图让别人做你的工作。您甚至已经链接了示例,因此您需要做的就是查看 HTML 和 CSS 以找出答案。即使这没有奏效,它至少可以让你提出更具体的问题,这可能会给你带来一些帮助。
  • 你可以说你不知道。如果我知道如何解释和复制页面源代码,我什至不会来这里。不管怎样,我在这里找到了this post,以防有人遇到。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-04-04
  • 2015-05-18
  • 1970-01-01
  • 1970-01-01
  • 2019-06-15
  • 2019-08-24
  • 2018-02-26
相关资源
最近更新 更多