2
\$\begingroup\$

Check out the live example: https://verifuse.github.io


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 parent. So here's what I did:

#container {
  position: relative;
  top: -99999px;
  margin-bottom: -99999px;
  pointer-events: none;
}
#offset {
  height: 99999px;
}
#button {
  position: sticky;
  bottom: 1rem;
  z-index: 99999;
  pointer-events: initial;
}
#unoffset {
  font-size: 1px;
}
<div>
  CONTENT CONTENT CONTENT
  <div id="container">
    <div id="offset"></div>
    <button id="button">BUTTON</button>
  </div>
  <div id="unoffset">&nbsp;</div>
</div>
CONTENT CONTENT CONTENT

#unoffset is a dummy element for stopping margin-collapse because #container is at the end of its parent.

Anyway, this whole solution seems too "hacky." Is there a better way?


Working Example

#container {
  position: relative;
  top: -99999px;
  margin-bottom: -99999px;
  pointer-events: none;
}
#offset {
  height: 99999px;
}
#button {
  position: sticky;
  bottom: 1rem;
  z-index: 99999;
  pointer-events: initial;
}
#unoffset {
  font-size: 1px;
}
<div>
 How did I get into this mess? I really don't know how. We seem to be made to suffer. It's our lot in life. I've got to rest before I fall apart. My joints are almost frozen. What a desolate place this is. Where are you going? Well, I'm not going that way. It's much too rocky. This way is much easier. What makes you think there are settlements over there? Don't get technical with me. What mission? What are you talking about? I've had just about enough of you! Go that way! You'll be malfunctioning within a day, you nearsighted scrap pile! And don't let me catch you following me begging for help, because you won't get it. No more adventures. I'm not going that way.

Stand by, Chewie, here we go. Cut in the sublight engines. What the...? Aw, we've come out of hyperspace into a meteor shower. Some kind of asteroid collision. It's not on any of the charts. What's going on? Our position is correct, except...no, Alderaan! What do you mean? Where is it? Thats what I'm trying to tell you, kid. It ain't there. It's been totally blown away. What? How? Destroyed...by the Empire!

I can't abide these Jawas. Disgusting creatures. Go on, go on. I can't understand how we got by those troopers. I thought we were dead. The Force can have a strong influence on the weak-minded. You will find it a powerful ally. Do you really think we're going to find a pilot here that'll take us to Alderaan? Well, most of the best freighter pilots can be found here. Only watch your step. This place can be a little rough. I'm ready for anything. Come along, Artoo.

Didn't we just leave this party? What kept you? We ran into some old friends. Is the ship all right? Seems okay, if we can get to it. Just hope the old man got the tractor beam out of commission. Look! Come on, Artoo, we're going! Now's our chance! Go! No! Come on! Come on! Luke, its too late! Blast the door! Kid!

Obi-Wan Kenobi...Obi-Wan?

 How did I get into this mess? I really don't know how. We seem to be made to suffer. It's our lot in life. I've got to rest before I fall apart. My joints are almost frozen. What a desolate place this is. Where are you going? Well, I'm not going that way. It's much too rocky. This way is much easier. What makes you think there are settlements over there? Don't get technical with me. What mission? What are you talking about? I've had just about enough of you! Go that way! You'll be malfunctioning within a day, you nearsighted scrap pile! And don't let me catch you following me begging for help, because you won't get it. No more adventures. I'm not going that way.

Stand by, Chewie, here we go. Cut in the sublight engines. What the...? Aw, we've come out of hyperspace into a meteor shower. Some kind of asteroid collision. It's not on any of the charts. What's going on? Our position is correct, except...no, Alderaan! What do you mean? Where is it? Thats what I'm trying to tell you, kid. It ain't there. It's been totally blown away. What? How? Destroyed...by the Empire!

I can't abide these Jawas. Disgusting creatures. Go on, go on. I can't understand how we got by those troopers. I thought we were dead. The Force can have a strong influence on the weak-minded. You will find it a powerful ally. Do you really think we're going to find a pilot here that'll take us to Alderaan? Well, most of the best freighter pilots can be found here. Only watch your step. This place can be a little rough. I'm ready for anything. Come along, Artoo.

Didn't we just leave this party? What kept you? We ran into some old friends. Is the ship all right? Seems okay, if we can get to it. Just hope the old man got the tractor beam out of commission. Look! Come on, Artoo, we're going! Now's our chance! Go! No! Come on! Come on! Luke, its too late! Blast the door! Kid!

Obi-Wan Kenobi...Obi-Wan?

 How did I get into this mess? I really don't know how. We seem to be made to suffer. It's our lot in life. I've got to rest before I fall apart. My joints are almost frozen. What a desolate place this is. Where are you going? Well, I'm not going that way. It's much too rocky. This way is much easier. What makes you think there are settlements over there? Don't get technical with me. What mission? What are you talking about? I've had just about enough of you! Go that way! You'll be malfunctioning within a day, you nearsighted scrap pile! And don't let me catch you following me begging for help, because you won't get it. No more adventures. I'm not going that way.

Stand by, Chewie, here we go. Cut in the sublight engines. What the...? Aw, we've come out of hyperspace into a meteor shower. Some kind of asteroid collision. It's not on any of the charts. What's going on? Our position is correct, except...no, Alderaan! What do you mean? Where is it? Thats what I'm trying to tell you, kid. It ain't there. It's been totally blown away. What? How? Destroyed...by the Empire!

I can't abide these Jawas. Disgusting creatures. Go on, go on. I can't understand how we got by those troopers. I thought we were dead. The Force can have a strong influence on the weak-minded. You will find it a powerful ally. Do you really think we're going to find a pilot here that'll take us to Alderaan? Well, most of the best freighter pilots can be found here. Only watch your step. This place can be a little rough. I'm ready for anything. Come along, Artoo.

Didn't we just leave this party? What kept you? We ran into some old friends. Is the ship all right? Seems okay, if we can get to it. Just hope the old man got the tractor beam out of commission. Look! Come on, Artoo, we're going! Now's our chance! Go! No! Come on! Come on! Luke, its too late! Blast the door! Kid!

Obi-Wan Kenobi...Obi-Wan?

How did I get into this mess? I really don't know how. We seem to be made to suffer. It's our lot in life. I've got to rest before I fall apart. My joints are almost frozen. What a desolate place this is. Where are you going? Well, I'm not going that way. It's much too rocky. This way is much easier. What makes you think there are settlements over there? Don't get technical with me. What mission? What are you talking about? I've had just about enough of you! Go that way! You'll be malfunctioning within a day, you nearsighted scrap pile! And don't let me catch you following me begging for help, because you won't get it. No more adventures. I'm not going that way.

Stand by, Chewie, here we go. Cut in the sublight engines. What the...? Aw, we've come out of hyperspace into a meteor shower. Some kind of asteroid collision. It's not on any of the charts. What's going on? Our position is correct, except...no, Alderaan! What do you mean? Where is it? Thats what I'm trying to tell you, kid. It ain't there. It's been totally blown away. What? How? Destroyed...by the Empire!

I can't abide these Jawas. Disgusting creatures. Go on, go on. I can't understand how we got by those troopers. I thought we were dead. The Force can have a strong influence on the weak-minded. You will find it a powerful ally. Do you really think we're going to find a pilot here that'll take us to Alderaan? Well, most of the best freighter pilots can be found here. Only watch your step. This place can be a little rough. I'm ready for anything. Come along, Artoo.

Didn't we just leave this party? What kept you? We ran into some old friends. Is the ship all right? Seems okay, if we can get to it. Just hope the old man got the tractor beam out of commission. Look! Come on, Artoo, we're going! Now's our chance! Go! No! Come on! Come on! Luke, its too late! Blast the door! Kid!

Obi-Wan Kenobi...Obi-Wan?
How did I get into this mess? I really don't know how. We seem to be made to suffer. It's our lot in life. I've got to rest before I fall apart. My joints are almost frozen. What a desolate place this is. Where are you going? Well, I'm not going that way. It's much too rocky. This way is much easier. What makes you think there are settlements over there? Don't get technical with me. What mission? What are you talking about? I've had just about enough of you! Go that way! You'll be malfunctioning within a day, you nearsighted scrap pile! And don't let me catch you following me begging for help, because you won't get it. No more adventures. I'm not going that way.

Stand by, Chewie, here we go. Cut in the sublight engines. What the...? Aw, we've come out of hyperspace into a meteor shower. Some kind of asteroid collision. It's not on any of the charts. What's going on? Our position is correct, except...no, Alderaan! What do you mean? Where is it? Thats what I'm trying to tell you, kid. It ain't there. It's been totally blown away. What? How? Destroyed...by the Empire!

I can't abide these Jawas. Disgusting creatures. Go on, go on. I can't understand how we got by those troopers. I thought we were dead. The Force can have a strong influence on the weak-minded. You will find it a powerful ally. Do you really think we're going to find a pilot here that'll take us to Alderaan? Well, most of the best freighter pilots can be found here. Only watch your step. This place can be a little rough. I'm ready for anything. Come along, Artoo.

Didn't we just leave this party? What kept you? We ran into some old friends. Is the ship all right? Seems okay, if we can get to it. Just hope the old man got the tractor beam out of commission. Look! Come on, Artoo, we're going! Now's our chance! Go! No! Come on! Come on! Luke, its too late! Blast the door! Kid!

Obi-Wan Kenobi...Obi-Wan?
 How did I get into this mess? I really don't know how. We seem to be made to suffer. It's our lot in life. I've got to rest before I fall apart. My joints are almost frozen. What a desolate place this is. Where are you going? Well, I'm not going that way. It's much too rocky. This way is much easier. What makes you think there are settlements over there? Don't get technical with me. What mission? What are you talking about? I've had just about enough of you! Go that way! You'll be malfunctioning within a day, you nearsighted scrap pile! And don't let me catch you following me begging for help, because you won't get it. No more adventures. I'm not going that way.

Stand by, Chewie, here we go. Cut in the sublight engines. What the...? Aw, we've come out of hyperspace into a meteor shower. Some kind of asteroid collision. It's not on any of the charts. What's going on? Our position is correct, except...no, Alderaan! What do you mean? Where is it? Thats what I'm trying to tell you, kid. It ain't there. It's been totally blown away. What? How? Destroyed...by the Empire!

I can't abide these Jawas. Disgusting creatures. Go on, go on. I can't understand how we got by those troopers. I thought we were dead. The Force can have a strong influence on the weak-minded. You will find it a powerful ally. Do you really think we're going to find a pilot here that'll take us to Alderaan? Well, most of the best freighter pilots can be found here. Only watch your step. This place can be a little rough. I'm ready for anything. Come along, Artoo.

Didn't we just leave this party? What kept you? We ran into some old friends. Is the ship all right? Seems okay, if we can get to it. Just hope the old man got the tractor beam out of commission. Look! Come on, Artoo, we're going! Now's our chance! Go! No! Come on! Come on! Luke, its too late! Blast the door! Kid!

Obi-Wan Kenobi...Obi-Wan? Now thats a name I haven't heard in a long time...a long time. I think my uncle knew him. He said he was dead. Oh, he's not dead, not...not yet. You know him! Well of course, of course I know him. He's me! I haven't gone by the name Obi-Wan since oh, before you were born. Then the droid does belong to you. Don't seem to remember ever owning a droid. Very interesting... I think we better get indoors. The Sandpeople are easily startled but they will soon be back and in greater numbers. Threepio! Where am I? I must have taken a bad step... Can you stand? We've got to get out of here before the Sandpeople return. I don't think I can make it. You go on, Master Luke. There's no sense in you risking yourself on my account. I'm done for. No, you're not. What kind of talk is that? Quickly, son...they're on the move.

Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. Don't try to frighten us with your sorcerer's ways, Lord Vader. Your sad devotion to that ancient religion has not helped you conjure up the stolen data tapes, or given you clairvoyance enough to find the Rebel's hidden fort... I find your lack of faith disturbing. Enough of this! Vader, release him! As you wish. This bickering is pointless. Lord Vader will provide us with the location of the Rebel fortress by the time this station is operational. We will then crush the Rebellion with one swift stroke.

Well, that's the trick, isn't it? And it's going to cost you something extra. Ten thousand in advance. Ten thousand? We could almost buy our own ship for that! But who's going to fly it, kid! You? You bet I could. I'm not such a bad pilot myself! We don't have to sit here and listen... We haven't that much with us. But we could pay you two thousand now, plus fifteen when we reach Alderaan. Seventeen, huh! Okay. You guys got yourself a ship. We'll leave as soon as you're ready. Docking bay Ninety-four. Ninety-four. Looks like somebody's beginning to take an interest in your handiwork. All right, we'll check it out.

There. You see Lord Vader, she can be reasonable. Continue with the operation. You may fire when ready. What? You're far too trusting. Dantooine is too remote to make an effective demonstration. But don't worry. We will deal with your Rebel friends soon enough. No! Commence primary ignition.

Luke? Luke? Luke? Have you seen Luke this morning? He said he had some things to do before he started today, so he left early. Uh? Did he take those two new droids with him? I think so. Well, he'd better have those units in the south range repaired be midday or there'll be hell to pay! Wait, there's something dead ahead on the scanner. It looks like our droid...hit the accelerator.

He says it's the best he can do. Since the XP-38 came out, they're just not in demand. It will be enough. If the ship's as fast as he's boasting, we ought to do well.

Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what! Wait a minute, where are you going?

This is Chewbacca. He's first-mate on a ship that might suit our needs. I don't like the look of this. Han Solo. I'm captain of the Millennium Falcon. Chewie here tells me you're looking for passage to the Alderaan system. Yes, indeed. If it's a fast ship. Fast ship? You've never heard of the Millennium Falcon? Should I have? It's the ship that made the Kessel run in less than twelve parsecs! I've outrun Imperial starships, not the local bulk-cruisers, mind you. I'm talking about the big Corellian ships now. She's fast enough for you, old man. What's the cargo? Only passengers. Myself, the boy, two droids, and no questions asked. What is it? Some kind of local trouble? Let's just say we'd like to avoid any Imperial entanglements.

What is it? I'm afraid I'm not quite sure, sir. He says I found her, and keeps repeating, She's here. Well, who...who has he found? Princess Leia. The princess? She's here? Princess? What's going on? Level five. Detention block A A-twenty-three. I'm afraid she's scheduled to be terminated. Oh, no! We've got to do something. What are you talking about? The droid belongs to her. She's the one in the message.. We've got to help her. Now, look, don't get any funny ideas. The old man wants us to wait right here. But he didn't know she was here. Look, will you just find a way back into the detention block?

Here they come! They're coming in too fast! Oooh! We've lost lateral controls. Don't worry, she'll hold together. You hear me, baby? Hold together! Got him! I got him! Great kid! Don't get cocky. There are still two more of them out there! That's it! We did it! We did it! Help! I think I'm melting! This is all your fault.

We don't serve their kind here! What? Your droids. They'll have to wait outside. We don't want them here. Listen, why don't you wait out by the speeder. We don't want any trouble. I heartily agree with you sir. Negola dewaghi wooldugger?!? He doesn't like you. I'm sorry. I don't like you either You just watch yourself. We're wanted men. I have the death sentence in twelve systems. I'll be careful than. You'll be dead. This little one isn't worth the effort. Come let me buy you something...

Close up formation. You'd better let her loose. Almost there! I can't hold them! It's away! It's a hit! Negative. Negative! It didn't go in. It just impacted on the surface. Red Leader, we're right above you. Turn to point... oh-five, we'll cover for you. Stay there... I just lost my starboard engine. Get set to make your attack run.

Not a bad bit of rescuing, huh? You know, sometimes I even amaze myself. That doesn't sound too hard. Besides, they let us go. It's the only explanation for the ease of our escape. Easy...you call that easy? Their tracking us! Not this ship, sister. At least the information in Artoo is still intact. What's so important? What's he carrying? The technical readouts of that battle station. I only hope that when the data is analyzed, a weakness can be found. It's not over yet! It is for me, sister! Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. I'm in it for the money! You needn't worry about your reward. If money is all that you love, then that's what you'll receive!

Her resistance to the mind probe is considerable. It will be some time before we can extract any information from her. The final check-out is complete. All systems are operational. What course shall we set? Perhaps she would respond to an alternative form of persuasion. What do you mean? I think it is time we demonstrate the full power of this station. Set your course for Princess Leia's home planet of Alderaan. With pleasure.

We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.

Remember, a Jedi can feel the Force flowing through him. You mean it controls your actions? Partially. But it also obeys your commands. Hokey religions and ancient weapons are no match for a good blaster at your side, kid. You don't believe in the Force, do you? Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. With the blast shield down, I can't even see. How am I supposed to fight? Your eyes can deceive you. Don't trust them.
  <div id="container">
    <div id="offset"></div>
    <button id="button">BUTTON</button>
  </div>
  <div id="unoffset">&nbsp;</div>
You must come along now, Artoo. There's really nothing more we can do. And my joints are freezing up. Don't say thing like that! Of course we'll see Master Luke again. He'll be quite all right, you'll see. Stupid little short-circuit. He'll be quite all right. Sir, all the patrols are in. There's still no contact from Skywalker or Solo. Mistress Leia, Artoo says he's been quite unable to pick up any signals, although he does admit that his own range is far too weak to abandon all hope. Your Highness, there's nothing more we can do tonight. The shield doors must be closed. Close the doors. Yes, sir.

Yes, that's it. Dagobah. No, I'm not going to change my mind about this. I'm not picking up any cities or technology. Massive life-form readings, though. There's something alive down there... Yes, I'm sure it's perfectly safe for droids. I know, I know! All the scopes are dead. I can't see a thing! Just hang on, I'm going to start the landing cycle... No, Artoo, you stay put. I'll have a look around.

What happened? Where? Found him in a junk pile? Oh, what a mess. Chewie, do you think you can repair him? Lando's got people who can fix him. No, thanks. I'm sorry. Am I interrupting anything? Not really. You look absolutely beautiful. You truly belong here with us among the clouds. Thank you. Will you join me for a little refreshment? Everyone's invited, of course. Having trouble with you droid? No. No problem. Why?

Oh. No one to meet us. I don't like this. Well, what would you like? Well, they did let us land. Look, don't worry. Everything's going to be fine. Trust me. See? My friend. Keep your eyes open, okay? Why, you slimy, double-crossing, no-good swindler! You've got a lot of guts coming here, after what you pulled. How you doing, you old pirate? So good to see you! Inever thought I'd catch up with you again. Where you been?

Steady, Rouge Two Activate harpoon. Good shot, Janson. One more pass. Coming around. Once more. One more. Cable out! Let her go! Detach cable. Cable detached. Come on! Whooha!! That got him! I see it, Wedge. Good work. I don't think we can protect two transports at a time. It's risky, but we can't hold out much longer. We have no choice. Launch patrols. Evacuate remaining ground staff. No, no! No! This one goes there, that one goes there. right? Artoo, you take good care of Master Luke now, understand? And...do take care of yourself. Oh, dear, oh, dear.
</div>


Check out the live example: https://verifuse.github.io

\$\endgroup\$
  • 3
    \$\begingroup\$ This question is being discussed on meta \$\endgroup\$ – Mast Aug 15 '18 at 7:43
  • 2
    \$\begingroup\$ There is a certain point in the page where you can see the button in the middle of the text. What exactly are you trying to achieve ? A floating button on the bottom that only shows if you are not at the bottom ? \$\endgroup\$ – Isac Aug 17 '18 at 0:28
  • \$\begingroup\$ @Isac A button that floats only when your scroll position is above where it is on the page. Check out the live example: verifuse.github.io \$\endgroup\$ – clickbait Aug 17 '18 at 1:47
  • 1
    \$\begingroup\$ Note that position: sticky currently has CSS Working Draft status. Safari only supports it as position: -webkit-sticky. \$\endgroup\$ – 200_success Aug 17 '18 at 3:40
  • \$\begingroup\$ Started a bounty, got no answer. smh \$\endgroup\$ – clickbait Aug 23 '18 at 17:54
2
\$\begingroup\$

I had a similar problem and independently came up with a very similar solution, which I suppose at least confirms that this isn't a totally crazy idea. After seeing your solution, I incorporated parts of it into mine.

First, some comments:

  height: 99999px;

This is risky, to say the least. I wouldn't rely on all browsers doing sensible things with such large divs; they may attempt to render the whole thing. Better to set the size to something realistic (maybe a couple of thousand pixels), rather than one hundred thousand pixels high. For my use-case, 2000 pixels was more than enough.

  position: relative;
  top: -99999px;
  margin-bottom: -99999px;

This has the unfortunate side-effect of adding a huge amount of scroll space to the bottom of the page. Although the immediately-following content is positioned correctly thanks to the negative bottom margin, the document itself will be stretched to fit what it thinks is the content.

<div id="offset"></div>

No need to create an explicit div here; just use a :before pseudoselector.

<div id="unoffset">&nbsp;</div>

And this could be handled by :after. Also you don't need to use a non-breaking space; padding will do the trick too, or even just a height property.


So what did my combined effort look like?

BEFORE
<div class="hold">
  <div class="item">
    THING
  </div>
</div>
AFTER
.hold {
  position: relative;
  margin-top: -2000px;
  pointer-events: none;
}

.hold:before {
  content: "";
  display: block;
  height: 2000px;
}

.item {
  pointer-events: initial;
  position: sticky;
  bottom: 0;
  z-index: 100;
}

Note that the use of a negative margin-top (rather than a negative top and margin-bottom) prevents the body scroll issue I mentioned, as well as reducing the number of places where the magic height value needs to be repeated. Also the use of :before means that the HTML is much simpler in exchange for slightly more CSS.

I didn't have issues with margin collapse, so I don't know if this method would still need something like the unoffset block, but if it does, it could be added with .hold:after { content: ""; display: block; height: 1px; } or similar.


As for the "hacky" concern; there is no native way in CSS's position: sticky to escape the parent container. That's because the intended use-case is slightly different. Since sticky is the only non-JavaScript way to create effects like this, I am confident that no significantly better way exists (though I'm sure the approach can be tweaked further).

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.