I have the following styles:
html {
--header-height: 80px;
--announcement-bar-height: 40px;
scroll-padding-top: calc(
var(--header-height) + var(--announcement-bar-height) + 5px
);
body[data-scrolled] {
--announcement-bar-height: 0px;
}
}
The problem is that when I scroll the page and hence data-scrolled
attribute is added to body
, the --announcement-bar-height
is not updated to 0px in scroll-padding-top
in html and still 40px is used. How to fix that without javacript?