CSS Sticky Mystery
Hey There,
I hope you are well? I should point out I am not a coder at all - but i do know enough to be no bother whatsoever.
I am trying to implement a Sticky element in my site which I have made with Adobe Muse (it is outdated, I know...).
The CSS seems pretty straightforward and I did have something working in the past (I am also trying to find the old file) - with the caveat that it got pushed off by another element - even with the z-index high. I am trying again and am trying to remember the magic line of code that got it working in that instance.
Here is what I have:
.CloseSticky {
position: -webkit-sticky !important;
position: sticky !important;
top: 140px !important;
}
The !important tags are needed since it's Muse. I think.
It seems to me that a sticky element should be very simple to implement however that doesn't seem to be the case here! As I said there was something I entered which worked - I can't remember what that was so would anybody be kind enough to point me in the right direction.
I have a feeling I asked this here in the past but I can't find the entry - will keep looking.
Cheers,
R36 Replies
Is the parent element Scrollable ?
btw please consider asking future frontend related question on the frontend channel?
you are more likely to get a quick answer there.
What is the issue besides “sticky isn’t working”? This does belong in #front-end where there is also a guide on #how-to-ask-good-questions .
Can you post your code on codepen or jsfiddle so we can see what’s going on in the markup and the css of the rest of the page? Is it possible it is working but it’s just stuck in place with the top value you’ve defined and then the container scrolls away ?
Hey There @clevermissfox so when i say that the sticky isn't working - it isn't sticking - jut scrolls as if there was no sticky property. Like said initially, I had something entered which made it stick but was then pushed off the screen but an element lower down (I have read that this could be due to the.. overflow?)
@clevermissfox ... I mean to add a return to say that I thought this was more back-end than front end - clearly demonstrating my level/lack of expertise..!
... Since this site is an Adobe Muse job, I don't have access to ALL the code - just what I have created. I've signed up for Codepen and realised that. So here's the page... I hope that OK? https://www.roryjmurphy.com/adobe.html
ADOBE | roryjmurphy.com
Various project for Adobe including brochure work, marketing, infographics and motion design.
Hey @Nihan,.. I think so... So explain in a little mor detail. The element scrolls, just does not stop. In the past when I had it sticking it would get pushed off. by a full width element which i could not figure out why so I ended up dropping the whole thing. Now I'm trying to get it to work again.
Ahh, can you give a screen of which part of the page you are trying to make sticky?
https://www.roryjmurphy.com/adobe.html
I am assuming it's on this page?
ADOBE | roryjmurphy.com
Various project for Adobe including brochure work, marketing, infographics and motion design.
Sorry I’m not sure what you mean by:
was then pushed off screen but an element lower down
@clevermissfox @Nihan - Thanks for getting back to me!
Your sticky element was pushed which way? Could be pushed off if there’s an overflow : hidden. Otherwise it would create horizontal scrollbars.
@clevermissfox OK so that was in the past - when I had the sticky behaviour working (I mentioned it to demonstrate that it could work in Muse). I had the same code as I have now - but I. added... something and the sticky behaviour worked - but the subheader underneath pushed the button off screen.
If you look at the Adobe page, the red square (.closeSticky) is what I am trying to get to stick (CSS in the original post).
What happened it that instance (in the past) was the button would stick perfectly, but as the sub header scrolled up it then pushed the button off screen.
Its a little difficult to describe - especially since that behaviour isn't working at the moment..
The CSS doesn't seem to be particularly tricky - even for me but I need to figure out the line of code to get it working first; and then discover why it gets pushed off and what to do about it.
How sticky works is it sticks to the top of its containing block. So I’m guessing after the sub header that section ends so the element is no longer in the viewport.
I am not sure what is generating your code...
But basically here is what I can already see
1. There is no sticky position on your red square.
2. Even if you add sticky,
it's a child of a smaller div (see the added ss). Meaning it will be pushed off the button, off screen when that smaller div leaves the screen, kinda like what you were explaining..
To fix it:
Make sure, the red button is a child of the the largest element you can find that go all the way down and use sticky. And then left and top to position it properly
and you should be good
Does it make sense ?
@roryjmurphy
Try giving it display block too
There’s a bunch of data attributes on .CloseSticky that may be affecting theur styles like data-sizepolicy = fixed and data-pintopage. The selector may be overwritten from specificity. I don’t advise using ids for selectors but in this case try selecting by its id instead #buttonu6495661
Yeah, that is Muse's doing - and is the arch enemy of developers. OK cool thank you. I will double check i still have the CSS applied to the square and give it a go. Display block may be the answer... Thanks again will try it out a bit later and see what happens.
Try selecting by the id if the position sticky with !important isn’t even being applied according to Nihan (I can’t inspect correctly , I’m on mobile so just swimming thru source code)
I don’t even see a red button on my side
OK cool. I'll try and find the Mue file which had the sticky working (its surprisingly difficult to find) and then go from there.. Thanks again!
I’m not surprised; the muse code output is … a lot of code. Bloated one might say. I guess it can be edited in Dreamweaver if you ever need to ! Let me know how it goes I’m invested now 🤣
@clevermissfox @Nihan
Yeah, you're not the first person to say that! It is/was notoriously excessive.
So.. development... I was placing the CSS in the page specific head - and tried copy and pasting the CSS into the master page head section (we place the additional CSS/html into a section on the Page Properties - there one for each page) - at any rate it now works and shows up in the code I imagine @Nihan ?
I am still having an issue with the sticky position being pushed off so I will try suggestions now. Perhaps see if i can add a transparent elemtn that I can figure how to parent the sticky to.
Thanks again!
@clevermissfox @Nihan
On the 2nd attempt I tried putting a text frame on the master page so it would populate every page - but that didn't work. So will have to put a text frame into every page because.. it now works!!
@clevermissfox @Nihan
Thank you again for your amazing help!
Am uploading and will test ina minute...!
Hey sorry for missing this ... I was afk most of the time .. also not sure why the other mentions didn't work.
@roryjmurphy
I have never used adobe muse tbh....
I can help you with the css and js.
But can't really help with how to generate those using muse
Feel free to dm me though
Hey @Nihan no worries, it works! You're suggestion of parenting is what helped me find a solution - I just now have a text frame (a Muse text frame) that spans the whole page. It' a little un-elegant maybe but it works. I'm now trying to figure out if i can do responsive text, but I'll post that in the front-end section of Discord - so nobody shouts at me. Thanks again!
Okay awesome..
Btw if you read my very first message, my intention wasn't to shout at you but to make sure you get your help faster...
Sorry if I had came across that way though
Hey @Nihan I'm only joking.. I know you didn't shout at me..! Please don't be offended!
Lol no worries
Hey @Nihan SO I have just discovered my text frame solution hs broken the responsive flow of the page. I have tried looking for a solution that would parent the element to the page itself - is that something that can actually be done?
Hey, sorry I had a bit hectic day today.
To be honest, I don't really have any idea about muse. So I am not sure how text frame is represented on the browser by muse. Maybe if you share the code I might be able to share something...
sry pal
Hey @nihan no worries... Any help I can get is genuinely appreciated!
So the page I am messing around with is https://www.roryjmurphy.com/google.html The code thought is probably very messy - Muse uses very proprietary code apparently.
I did nearly find a solution which worked........ to a point. Reducing the window size to reveal the next breakpoint COMPLETLY broke the whole site. So that does not seem like a viable solution. I am continuing to try and figure somrthing out. These looked promising:
https://codereview.stackexchange.com/questions/201327/trick-circumvents-position-sticky-restriction-to-parent
https://stackoverflow.com/questions/46913063/positionsticky-does-not-leave-parent
But they weren't.
I did see something about giving the parent element.. overflow-y:visible. But that hasn't worked either.
GOOGLE | roryjmurphy.com
Discover how Google Korea is enabing innovation, AI, cloud computing, and more. Explore limitless possibilities now!
Code Review Stack Exchange
Trick circumvents [position: sticky] restriction to parent
position: sticky; elements are sticky within the bounding box of their direct parent containers. I wanted to make a stickily-positioned button that sticks to the bottom of the viewport, not its par...
Stack Overflow
position:sticky does not leave parent
How can I make an element sticky, so it stays at the top of the viewport? I want the element to remain sticky even if it leaves it's container.
I tried this:
.child-sticky {
height: 200px;
Thanks again!
I don't know but sometimes your mentions don't work lol
But I will get back to this asap.
Cheers @Nihan! Doubtless I am doing something wrong..!
I have taken the close button off the pages for the moment and put it on the It's Not Custard page - which now features a responsive header..!
https://www.roryjmurphy.com/its-not-custard.html
I have just realised I need to go over every other page now to make sure the widths all work...
Thanks again,
R
IT"S NOT CUSTARD | roryjmurphy.com
Digitally painted key-art work for short film It' Not Custard. Along with a digitally illustrated poster with a typographic treatment poster for the production.
Wait so has it been solved?
Hey @ Nihan no it hasn't.. The It's Not Custard page is the only place where the close button remains - I've deleted it off the others since it... well.. it doesn't work..
Damn
Yeah.. It's a pain!
Thanks very much for your help!