仅在页内容小于或等于110 an或等效解决方案时隐藏元素的css解决方案

Question

我只实现了一个css回到顶部按钮，但在较短的页面上，它显示时，它是不需要的。

.top {
  position: sticky;
  bottom: 9px;
  padding: 9px;
  place-self: end;
  margin-top: 109vh;

  font-weight:700;
  border-radius: 9px;
  color: var(--a1);
  background: var(--c2);
}
.top:hover {
  color: var(--c2);
  background: var(--a1);
  text-decoration: none;
}

您可以在这里的左下角看到它：https://abridge.netlify.app/overview-abridge/ (不需要在页面如此短的时候看到它)

只要它有一个更长的页面，它就能正常工作：https://abridge.netlify.app/overview-code-blocks/

我曾经想过人为地增加短页面的大小，但这似乎有点麻烦，我也知道我可以很容易地用javascript解决这个问题，但是我正在试图找到一个不依赖javascript的解决方案。我试着玩媒体查询，但没有找到任何实际询问一个视区中有多少内容的查询。

如果你熟悉佐拉，回购器就在这里：https://github.com/Jieiku/abridge

如果安装了zola，则可以克隆存储库并从目录中运行zola服务，以便在本地测试更改。

下面是返回到顶部的文件：https://github.com/Jieiku/abridge/blob/master/sass/include/_top.scss

编辑:就目前而言，我发现了一种解决这个问题的创造性方法，因为它是一个SSG，而zola具有读时值--我这样做了：

{%- block gotop %}

{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
<a href="#" class="top">&cuwed;</a>
{%- endif %}
{%- endif %}

{%- endblock gotop %}

现在唯一要解决的问题是在页面的右侧，而不是左边。

Answer 1

我认为最干净的解决方案是使用@media屏幕和(最大高度:110 my )，以下是我的建议：

​

@media screen and (max-height: 110vh){
    .top{
        display:none;
    }
}

​

这里的想法是，如果页面的视图当前在110‘s的最大高度范围内，那么我们希望将.top设置为不再显示在页面上。

Answer 2

这是我使用的解决方案：

.topout {
  position: sticky;
  bottom: 1px;
  padding: 20px;
  place-self: end;
  margin-top: 110vh;
  pointer-events: none;
}
.topleft {
  margin-left: calc(100% - 80px);
}
.top {
  pointer-events: all;
  padding: 9px;
  border-radius: 9px;
  font-weight:700;
  color: #FF9900;
  background: #222222;
}
.top:hover {
  text-decoration: none;
  color: #222222;
  background: #FF9900;
}

然后在Zola模板页面中：

{%- block gotop %}

{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
<span class="topout">
<span class="topleft"> </span><a href="#" class="top">&cuwed;</a>
</span>
{%- endif %}
{%- endif %}

{%- endblock gotop %}

你可以在这里看到它：https://abridge.netlify.app/overview-code-blocks/

我本想避免使用calc()，但是这在Firefox、Chrome、Android中没有问题。