1

My sticky close-button for my modal doesn´t work properly. Instead of behaving sticky it behaves like a fixed element, even though I specified top:0 and -webkit-position:sticky;position:sticky; in my css rules. Below you can see my code snippet: 

<html>
<head>
<style>
    .modalclose {
        position: -webkit-sticky;
        position: sticky;
        width: 100%;
        top: 0px;
    }
</style>
<link rel="stylesheet" href="./css/w3.css">
</head>
<body>
    <div class="w3-modal">
        <div class="w3-modal-content w3-display-container">
            <div style="position:absolute;top:0;left:0;height:43px;width:100%;background-color:black;"></div>
            <div onclick="javascript:void(0);" class="w3-button w3-large w3-display-topright modalclose w3-black w3-text-white">x</div>
            <div class="w3-container w3-black">
                <h1>LOREM IPSUM</h1>
            </div>
            <div class="w3-container" style="padding-bottom: 2000px">
                <h5>Lorem Ipsum</h5>
            </div>
        </div>
    </div>
</body>
</html>

In Firefox (Desktop) and Chrome (3 different mobile devices), the close-button is being treated as if it would be an fixed element, it never "sticks" to the top of the viewport (except for 1 mobile device running an older chrome version, there it works fine, but therefore the span is not click-able).
What am I doing wrong?
Here´s a link to the above code on my page: click here

3x071c
  • 955
  • 10
  • 40
  • By defining "top:0px" your sticky element will act like a fixed element. It will scroll with the content until top=0 is reached. – Heiko Nov 22 '18 at 16:37
  • @Heiko In tutorials they say that if I want it to behave like a normal element until it reaches top: 0 (and then sticks to the top) I have to specify `top:0;` – 3x071c Nov 22 '18 at 16:42
  • The top position is where a sticky element stops scrolling with the rest of your page. Which parts of your modal should stick to the top of the viewport? Can you describe more detailed, what you are trying to achieve? – Heiko Nov 22 '18 at 16:47
  • The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko – 3x071c Nov 22 '18 at 16:53
  • I just now saw the confusing part with vendor prefixes. You must use "position: -webkit-sticky" for webkit browsers. And you will have define your span as a block element for Safari, as well. Or you change to "div". – Heiko Nov 22 '18 at 17:02
  • @Heiko Still doesnt work, not in Firefox and not in Chrome. I´ll edit my code based on the changes I made. – 3x071c Nov 22 '18 at 17:51
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184103/discussion-between-searchingsolutions-and-heiko). – 3x071c Nov 22 '18 at 18:03

1 Answers1

1

The problem is the the .w3-modal has a fixed position and a 100px padding-top. It never leaves the screen. And it has a padding-top of 100px.

Your .modalclose is already sticky and working fine.

Try removing the position fixed of the .w3-modal class. If you want the modal to be fixed, then you could remove the padding-top: 100px from it, so that the .modalclose can come up to the top of the screen.

ndvo
  • 939
  • 11
  • 16
  • Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways! – 3x071c Nov 22 '18 at 19:19
  • 1
    Perhaps if you change the order of the elements you can use another element margin-top to achieve the same effect as the padding-top on the parent. – ndvo Nov 22 '18 at 21:50