css only solution to hide element when page content is less than or equal to 110vh or an equivalent solution

Question

I have implemented a css only back to top button, but on shorter pages it shows when it is not needed.

.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;
}

You can see it in the bottom left corner here: https://abridge.netlify.app/overview-abridge/ (don't need to see it when the page is this short)

It works fine so long as its a longer page: https://abridge.netlify.app/overview-code-blocks/

I have thought of artificially increasing the size of short pages, but that just seems kinda hacky, also I know I can easily resolve this with javascript, but I am trying to find a solution that does not rely on javascript. I tried playing around with media queries but could not find any that actually query how much content is in a viewport.

If you are familiar with zola, the repo is here: https://github.com/Jieiku/abridge

If you have zola installed you can clone the repository and run zola serve from the directory, to test changes locally.

Here is the file with the back to top: https://github.com/Jieiku/abridge/blob/master/sass/include/_top.scss

EDIT: for the moment I have discovered a creative way of resolving this, because its a SSG and zola has readtime value I did this:

{%- block gotop %}

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

{%- endblock gotop %}

The only thing to resolve now is to somehow get it over on the right side of the page instead of the left side.

Answer 1

I think the cleanest solution would be to utilize @media screen and (max-height: 110vh) Here is my suggestion:

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

The idea here is that if the page's viewport is currently within that max-height of 110vh then we want to set .top to no longer display on the page.

Answer 2

This is the solution I used:

.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;
}

Then in Zola Template page:

{%- 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 %}

You can see it here: https://abridge.netlify.app/overview-code-blocks/

I would have liked to avoid using calc() however this does work without issue in: Firefox, Chrome, Android Chrome