Calculate height difference with CSS

Question

There’s a way for me to do the code below, which is in Jquery, but with CSS?

 $(document).scroll(function() {

    if (  $(this).scrollTop() > $(window).height() ) {

        $("section#topo").css("height", "10vh");
        $("section#topo").css("background", "#999");

    } else {

        $("section#topo").css("height", "7vh");
        $("section#topo").css("background", "none");

    }

});

The idea would be something like:

<style>

    calc (body.scrollTop > window.height) {
        section#topo {
            height: "10vh";
            background: #999;
        }
    }

    calc (body.scrollTop <= window.height) {
        section#topo {
            height: "7vh";
            background: none;
        }
    }

</style>

Answer 1

You can solve half the problem with just CSS, maybe I can help you in some way.

As in jQuery to realize that you want any movement of scroll the top section change, I imagine that this section should be pasted at the top of the page...

In this example I’m using position:sticky with negative value in the father, and with positive value in the son, so you get a very interesting effect. Only with CSS!

^{About changing a color of background only with CSS when making scroll, this is not yet possible as CSS does not detect events from scroll, but js yes...}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 200vh;
}

.box {
  height: 105px;
  background-color: red;
  position: sticky;
  top: -50px;
}
.box .teste {
  position: sticky;
  top: 40px;
  display: inline-block;
  border: 1px solid #000;
  margin-bottom: 20px;
}

<div class="box">
  <span class="teste">
    teste
  </span>
</div>