CSS Sticky buttons div not working in IE 11
I need to make the div containing the buttons sticky, so that the buttons in that div will stay at the bottom as the user scrolls the screen.
This is so that the user does not have to scroll all the way down to click on the buttons.
Sample page: https://jsfiddle.net/thunderbolt36/a4yjfg13/
The div containing the buttons is all the way down here:
<div class="form-group sticky-button-thing-not-working-on-ie">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
The CSS class to make it sticky (working on Firefox):
.sticky-button-thing-not-working-on-ie {
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
But the same is not working on Internet Explorer 11.
Any help on how to get the same code working on IE11?
Expected result: https://i.imgur.com/bEHXcrG.png
html css3 internet-explorer-11 sticky
edited Jun 5 '16 at 20:48
Spudley
140k33196276
asked Jun 5 '16 at 19:45
Tx36Tx36
96236
add a comment |
I need to make the div containing the buttons sticky, so that the buttons in that div will stay at the bottom as the user scrolls the screen.
This is so that the user does not have to scroll all the way down to click on the buttons.
Sample page: https://jsfiddle.net/thunderbolt36/a4yjfg13/
The div containing the buttons is all the way down here:
<div class="form-group sticky-button-thing-not-working-on-ie">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
The CSS class to make it sticky (working on Firefox):
.sticky-button-thing-not-working-on-ie {
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
But the same is not working on Internet Explorer 11.
Any help on how to get the same code working on IE11?
Expected result: https://i.imgur.com/bEHXcrG.png
html css3 internet-explorer-11 sticky
edited Jun 5 '16 at 20:48
Spudley
140k33196276
asked Jun 5 '16 at 19:45
Tx36Tx36
96236
add a comment |
I need to make the div containing the buttons sticky, so that the buttons in that div will stay at the bottom as the user scrolls the screen.
This is so that the user does not have to scroll all the way down to click on the buttons.
Sample page: https://jsfiddle.net/thunderbolt36/a4yjfg13/
The div containing the buttons is all the way down here:
<div class="form-group sticky-button-thing-not-working-on-ie">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
The CSS class to make it sticky (working on Firefox):
.sticky-button-thing-not-working-on-ie {
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
But the same is not working on Internet Explorer 11.
Any help on how to get the same code working on IE11?
Expected result: https://i.imgur.com/bEHXcrG.png
html css3 internet-explorer-11 sticky
edited Jun 5 '16 at 20:48
Spudley
140k33196276
asked Jun 5 '16 at 19:45
Tx36Tx36
96236
I need to make the div containing the buttons sticky, so that the buttons in that div will stay at the bottom as the user scrolls the screen.
This is so that the user does not have to scroll all the way down to click on the buttons.
Sample page: https://jsfiddle.net/thunderbolt36/a4yjfg13/
The div containing the buttons is all the way down here:
<div class="form-group sticky-button-thing-not-working-on-ie">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
The CSS class to make it sticky (working on Firefox):
.sticky-button-thing-not-working-on-ie {
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
But the same is not working on Internet Explorer 11.
Any help on how to get the same code working on IE11?
Expected result: https://i.imgur.com/bEHXcrG.png
html css3 internet-explorer-11 sticky
html css3 internet-explorer-11 sticky
edited Jun 5 '16 at 20:48
Spudley
140k33196276
asked Jun 5 '16 at 19:45
Tx36Tx36
96236
edited Jun 5 '16 at 20:48
Spudley
140k33196276
asked Jun 5 '16 at 19:45
Tx36Tx36
96236
edited Jun 5 '16 at 20:48
Spudley
140k33196276
edited Jun 5 '16 at 20:48
Spudley
140k33196276
edited Jun 5 '16 at 20:48
Spudley
140k33196276
140k33196276
asked Jun 5 '16 at 19:45
Tx36Tx36
96236
asked Jun 5 '16 at 19:45
Tx36Tx36
96236
asked Jun 5 '16 at 19:45
Tx36Tx36
96236
96236
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
sticky doesn't work on IE11, but luckily, in this case, you can use fixed, which will work on both old and new browsers.
.sticky-button-thing-not-working-on-ie {
position: fixed; /* added to support older browsers */
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
And you can actually drop sticky, since it's not used how it's intended. sticky excels i.e. when you position it below the top edge, and when one scroll down it it will move with the page until it reach the top edge, where it will stop and stay until one scroll up again.
Side note: Edge support sticky from version 16
answered Jun 5 '16 at 20:20
LGSonLGSon
69.5k84584
3
well, fixed elements are positioned to viewport
– shabunc
Mar 21 '17 at 12:29
@shabunc That is correct, andfixedis the closest you can get for browsers not supportingsticky... well, you could of course add a small script to make it behave assticky
– LGSon
Mar 21 '17 at 12:43
2
sticky != fixed
– kpup
Jul 28 '17 at 18:17
@kpup That is correct, but if you check the expected result the OP want, you'll see that my answer solves that.
– LGSon
Jul 28 '17 at 18:54
1
@kpup I updated my answer to clarify what I meant, so you can retract your down vote
– LGSon
Jul 28 '17 at 19:55
|
show 1 more comment
IE11 will not support position:sticky and never will (as it is being superceded by Edge): see browser support at Can I Use
CSS Tricks recently posted something that may help: Sticky Footer, Five Ways
Even then, the flex example won't work with IE11, but you can tweak it using code from Normalizing Cross-browser Flexbox Bugs.
answered Jun 5 '16 at 20:08
aardrianaardrian
5,609925
add a comment |
This can be best solved by StickyBits, which is a polyfill for position: sticky for IE (and other browsers): https://github.com/dollarshaveclub/stickybits
Most important to me:
it does not have the jumpiness that plugins that are built around position: fixed have because it tries to support position: sticky first.
answered Oct 19 '17 at 13:22
nachtigallnachtigall
1,61811723
add a comment |
Check your page in top <!DOCTYPE HTML>
answered Nov 3 '17 at 9:28
Pankaj UpadhyayPankaj Upadhyay
1,4541319
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37646066%2fcss-sticky-buttons-div-not-working-in-ie-11%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
sticky doesn't work on IE11, but luckily, in this case, you can use fixed, which will work on both old and new browsers.
.sticky-button-thing-not-working-on-ie {
position: fixed; /* added to support older browsers */
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
And you can actually drop sticky, since it's not used how it's intended. sticky excels i.e. when you position it below the top edge, and when one scroll down it it will move with the page until it reach the top edge, where it will stop and stay until one scroll up again.
Side note: Edge support sticky from version 16
answered Jun 5 '16 at 20:20
LGSonLGSon
69.5k84584
3
well, fixed elements are positioned to viewport
– shabunc
Mar 21 '17 at 12:29
@shabunc That is correct, andfixedis the closest you can get for browsers not supportingsticky... well, you could of course add a small script to make it behave assticky
– LGSon
Mar 21 '17 at 12:43
2
sticky != fixed
– kpup
Jul 28 '17 at 18:17
@kpup That is correct, but if you check the expected result the OP want, you'll see that my answer solves that.
– LGSon
Jul 28 '17 at 18:54
1
@kpup I updated my answer to clarify what I meant, so you can retract your down vote
– LGSon
Jul 28 '17 at 19:55
|
show 1 more comment
sticky doesn't work on IE11, but luckily, in this case, you can use fixed, which will work on both old and new browsers.
.sticky-button-thing-not-working-on-ie {
position: fixed; /* added to support older browsers */
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
And you can actually drop sticky, since it's not used how it's intended. sticky excels i.e. when you position it below the top edge, and when one scroll down it it will move with the page until it reach the top edge, where it will stop and stay until one scroll up again.
Side note: Edge support sticky from version 16
answered Jun 5 '16 at 20:20
LGSonLGSon
69.5k84584
3
well, fixed elements are positioned to viewport
– shabunc
Mar 21 '17 at 12:29
@shabunc That is correct, andfixedis the closest you can get for browsers not supportingsticky... well, you could of course add a small script to make it behave assticky
– LGSon
Mar 21 '17 at 12:43
2
sticky != fixed
– kpup
Jul 28 '17 at 18:17
@kpup That is correct, but if you check the expected result the OP want, you'll see that my answer solves that.
– LGSon
Jul 28 '17 at 18:54
1
@kpup I updated my answer to clarify what I meant, so you can retract your down vote
– LGSon
Jul 28 '17 at 19:55
|
show 1 more comment
sticky doesn't work on IE11, but luckily, in this case, you can use fixed, which will work on both old and new browsers.
.sticky-button-thing-not-working-on-ie {
position: fixed; /* added to support older browsers */
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
And you can actually drop sticky, since it's not used how it's intended. sticky excels i.e. when you position it below the top edge, and when one scroll down it it will move with the page until it reach the top edge, where it will stop and stay until one scroll up again.
Side note: Edge support sticky from version 16
answered Jun 5 '16 at 20:20
LGSonLGSon
69.5k84584
sticky doesn't work on IE11, but luckily, in this case, you can use fixed, which will work on both old and new browsers.
.sticky-button-thing-not-working-on-ie {
position: fixed; /* added to support older browsers */
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
And you can actually drop sticky, since it's not used how it's intended. sticky excels i.e. when you position it below the top edge, and when one scroll down it it will move with the page until it reach the top edge, where it will stop and stay until one scroll up again.
Side note: Edge support sticky from version 16
answered Jun 5 '16 at 20:20
LGSonLGSon
69.5k84584
edited Jul 29 '17 at 10:12
answered Jun 5 '16 at 20:20
LGSonLGSon
69.5k84584
answered Jun 5 '16 at 20:20
LGSonLGSon
69.5k84584
answered Jun 5 '16 at 20:20
LGSonLGSon
69.5k84584
69.5k84584
3
well, fixed elements are positioned to viewport
– shabunc
Mar 21 '17 at 12:29
@shabunc That is correct, andfixedis the closest you can get for browsers not supportingsticky... well, you could of course add a small script to make it behave assticky
– LGSon
Mar 21 '17 at 12:43
2
sticky != fixed
– kpup
Jul 28 '17 at 18:17
@kpup That is correct, but if you check the expected result the OP want, you'll see that my answer solves that.
– LGSon
Jul 28 '17 at 18:54
1
@kpup I updated my answer to clarify what I meant, so you can retract your down vote
– LGSon
Jul 28 '17 at 19:55
|
show 1 more comment
3
well, fixed elements are positioned to viewport
– shabunc
Mar 21 '17 at 12:29
@shabunc That is correct, andfixedis the closest you can get for browsers not supportingsticky... well, you could of course add a small script to make it behave assticky
– LGSon
Mar 21 '17 at 12:43
2
sticky != fixed
– kpup
Jul 28 '17 at 18:17
@kpup That is correct, but if you check the expected result the OP want, you'll see that my answer solves that.
– LGSon
Jul 28 '17 at 18:54
1
@kpup I updated my answer to clarify what I meant, so you can retract your down vote
– LGSon
Jul 28 '17 at 19:55
3
3
well, fixed elements are positioned to viewport
– shabunc
Mar 21 '17 at 12:29
well, fixed elements are positioned to viewport
– shabunc
Mar 21 '17 at 12:29
@shabunc That is correct, and
fixed is the closest you can get for browsers not supporting sticky ... well, you could of course add a small script to make it behave as sticky– LGSon
Mar 21 '17 at 12:43
@shabunc That is correct, and
fixed is the closest you can get for browsers not supporting sticky ... well, you could of course add a small script to make it behave as sticky– LGSon
Mar 21 '17 at 12:43
2
2
sticky != fixed
– kpup
Jul 28 '17 at 18:17
sticky != fixed
– kpup
Jul 28 '17 at 18:17
@kpup That is correct, but if you check the expected result the OP want, you'll see that my answer solves that.
– LGSon
Jul 28 '17 at 18:54
@kpup That is correct, but if you check the expected result the OP want, you'll see that my answer solves that.
– LGSon
Jul 28 '17 at 18:54
1
1
@kpup I updated my answer to clarify what I meant, so you can retract your down vote
– LGSon
Jul 28 '17 at 19:55
@kpup I updated my answer to clarify what I meant, so you can retract your down vote
– LGSon
Jul 28 '17 at 19:55
|
show 1 more comment
IE11 will not support position:sticky and never will (as it is being superceded by Edge): see browser support at Can I Use
CSS Tricks recently posted something that may help: Sticky Footer, Five Ways
Even then, the flex example won't work with IE11, but you can tweak it using code from Normalizing Cross-browser Flexbox Bugs.
answered Jun 5 '16 at 20:08
aardrianaardrian
5,609925
add a comment |
IE11 will not support position:sticky and never will (as it is being superceded by Edge): see browser support at Can I Use
CSS Tricks recently posted something that may help: Sticky Footer, Five Ways
Even then, the flex example won't work with IE11, but you can tweak it using code from Normalizing Cross-browser Flexbox Bugs.
answered Jun 5 '16 at 20:08
aardrianaardrian
5,609925
add a comment |
IE11 will not support position:sticky and never will (as it is being superceded by Edge): see browser support at Can I Use
CSS Tricks recently posted something that may help: Sticky Footer, Five Ways
Even then, the flex example won't work with IE11, but you can tweak it using code from Normalizing Cross-browser Flexbox Bugs.
answered Jun 5 '16 at 20:08
aardrianaardrian
5,609925
IE11 will not support position:sticky and never will (as it is being superceded by Edge): see browser support at Can I Use
CSS Tricks recently posted something that may help: Sticky Footer, Five Ways
Even then, the flex example won't work with IE11, but you can tweak it using code from Normalizing Cross-browser Flexbox Bugs.
answered Jun 5 '16 at 20:08
aardrianaardrian
5,609925
answered Jun 5 '16 at 20:08
aardrianaardrian
5,609925
answered Jun 5 '16 at 20:08
aardrianaardrian
5,609925
answered Jun 5 '16 at 20:08
aardrianaardrian
5,609925
5,609925
add a comment |
add a comment |
This can be best solved by StickyBits, which is a polyfill for position: sticky for IE (and other browsers): https://github.com/dollarshaveclub/stickybits
Most important to me:
it does not have the jumpiness that plugins that are built around position: fixed have because it tries to support position: sticky first.
answered Oct 19 '17 at 13:22
nachtigallnachtigall
1,61811723
add a comment |
This can be best solved by StickyBits, which is a polyfill for position: sticky for IE (and other browsers): https://github.com/dollarshaveclub/stickybits
Most important to me:
it does not have the jumpiness that plugins that are built around position: fixed have because it tries to support position: sticky first.
answered Oct 19 '17 at 13:22
nachtigallnachtigall
1,61811723
add a comment |
This can be best solved by StickyBits, which is a polyfill for position: sticky for IE (and other browsers): https://github.com/dollarshaveclub/stickybits
Most important to me:
it does not have the jumpiness that plugins that are built around position: fixed have because it tries to support position: sticky first.
answered Oct 19 '17 at 13:22
nachtigallnachtigall
1,61811723
This can be best solved by StickyBits, which is a polyfill for position: sticky for IE (and other browsers): https://github.com/dollarshaveclub/stickybits
Most important to me:
it does not have the jumpiness that plugins that are built around position: fixed have because it tries to support position: sticky first.
answered Oct 19 '17 at 13:22
nachtigallnachtigall
1,61811723
answered Oct 19 '17 at 13:22
nachtigallnachtigall
1,61811723
answered Oct 19 '17 at 13:22
nachtigallnachtigall
1,61811723
answered Oct 19 '17 at 13:22
nachtigallnachtigall
1,61811723
1,61811723
add a comment |
add a comment |
Check your page in top <!DOCTYPE HTML>
answered Nov 3 '17 at 9:28
Pankaj UpadhyayPankaj Upadhyay
1,4541319
add a comment |
Check your page in top <!DOCTYPE HTML>
answered Nov 3 '17 at 9:28
Pankaj UpadhyayPankaj Upadhyay
1,4541319
add a comment |
Check your page in top <!DOCTYPE HTML>
answered Nov 3 '17 at 9:28
Pankaj UpadhyayPankaj Upadhyay
1,4541319
Check your page in top <!DOCTYPE HTML>
answered Nov 3 '17 at 9:28
Pankaj UpadhyayPankaj Upadhyay
1,4541319
answered Nov 3 '17 at 9:28
Pankaj UpadhyayPankaj Upadhyay
1,4541319
answered Nov 3 '17 at 9:28
Pankaj UpadhyayPankaj Upadhyay
1,4541319
answered Nov 3 '17 at 9:28
Pankaj UpadhyayPankaj Upadhyay
1,4541319
1,4541319
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37646066%2fcss-sticky-buttons-div-not-working-in-ie-11%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
