Firefox Customs

64 readers

2 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 2 years ago

MODERATORS

[email protected]

MrOtherGuy

Problem when using 'position: sticky' in 'about:addons' page (lemmy.world)

submitted 1 week ago by Godie to c/[email protected]

6 comments fedilink hide all child comments

Hi, I want to solve this behavior when scrolling in 'about:addons' page. I put a background-image in body using 'userChrome.css' and in 'userContent.css' I set transparency in some elements backgrounds, but when I scroll the #main element goes behind .sticky-container element, so here is my question: Can I make the #main and .sticky-container elements don't cross, I tried to set a margin, clip-path, etc but I couldn't make any progress to solve it.

you are viewing a single comment's thread
view the rest of the comments

[–] MrOtherGuy 1 points 1 week ago (3 children)

I'm not sure if you can do that, but you may be able to make the sticky-container opaque, so that it covers the scrolled contents, but assign it the same background-image that you are using on body and then try setting background-attachment: fixed for it and maybe play with few background-position values to align it to the background-image of the body. And also make sure the image is shown as same size.

[–] Godie 1 points 1 week ago (2 children)

hi, I had in that way in the past, but I wanted to remove the need to align the image (when menubar is on, when not, when bookmarks-bar is on, when not, where using tre-tabs and its necessary to align again). I will end removing the position: sticky from .sticky-container

[–] MrOtherGuy 1 points 1 week ago (1 children)

Oh I think I misunderstood what you are doing, I thought you meant you set the content document body to also have the background-image, in which case the same alignment issue would still happen. But it sounds like you have just one image at the main-window body and the content area is transparent.

With some shuffling you could achieve pretty much the same result visually - so that the header sticks, but doesn't overlay the list:

@-moz-document url("about:addons"){
  #content{
    max-height: 100vh;
    display: grid;
    grid-template-rows: auto auto 1fr;
    --in-content-page-background: transparent;
  }
  #page-header > .sticky-container{
    position: static !important;
  }
  #main{
    overflow: auto;
    padding-inline: 6px;
    scrollbar-gutter: stable;
  }
}

[–] Godie 1 points 1 week ago

thanks you so much, the scrollbar isn't in the right position but I thinks is perfect enough solution. 💙