HTML5 Position Sticky Couldn't work although i had set top 0 [duplicate]
This question already has an answer here:
Problems with sticky positioning
1 answer
/* site navigation bar */
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p {
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link,
nav.sitenavigation a:visited {
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
color: #33cc00;
}
p{
margin: 2000px;
}<body>
<div>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</div>
<p>ABC
</p>
</body>I have tried many ways to let my navigation bar to be stick on top but it is not. I have reset the HTML style to be overflow: auto. It shows like position: relative instead of position: sticky
html css
asked Nov 21 at 8:22
Ziriki
63
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 at 8:55
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 1 more comment
This question already has an answer here:
Problems with sticky positioning
1 answer
/* site navigation bar */
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p {
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link,
nav.sitenavigation a:visited {
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
color: #33cc00;
}
p{
margin: 2000px;
}<body>
<div>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</div>
<p>ABC
</p>
</body>I have tried many ways to let my navigation bar to be stick on top but it is not. I have reset the HTML style to be overflow: auto. It shows like position: relative instead of position: sticky
html css
asked Nov 21 at 8:22
Ziriki
63
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 at 8:55
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
The snippet does not demonstrate the problem. Butposition:stickymakes an element only sticky as long as its parent element is visible on the screen. As an example, I made this fiddle that shows the stickyness working fine as long as some of the div content is visible, but it scrolls up with the div after that. Is that what happens in your case?
– Mr Lister
Nov 21 at 8:34
It doesn't stick on top at all.
– Ziriki
Nov 21 at 8:47
remove the div around the navigation and it will work
– Temani Afif
Nov 21 at 8:55
@MrLister there is an extra div in his code which create the issue, the element is sticking to that div but the height of the div is also defined by the sticky element so there is no room for the sticky effect.
– Temani Afif
Nov 21 at 9:05
@TemaniAfif Thanks a lot. It's the div causing the sticky in nav not working
– Ziriki
Nov 21 at 9:19
|
show 1 more comment
This question already has an answer here:
Problems with sticky positioning
1 answer
/* site navigation bar */
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p {
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link,
nav.sitenavigation a:visited {
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
color: #33cc00;
}
p{
margin: 2000px;
}<body>
<div>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</div>
<p>ABC
</p>
</body>I have tried many ways to let my navigation bar to be stick on top but it is not. I have reset the HTML style to be overflow: auto. It shows like position: relative instead of position: sticky
html css
asked Nov 21 at 8:22
Ziriki
63
This question already has an answer here:
Problems with sticky positioning
1 answer
/* site navigation bar */
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p {
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link,
nav.sitenavigation a:visited {
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
color: #33cc00;
}
p{
margin: 2000px;
}<body>
<div>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</div>
<p>ABC
</p>
</body>I have tried many ways to let my navigation bar to be stick on top but it is not. I have reset the HTML style to be overflow: auto. It shows like position: relative instead of position: sticky
This question already has an answer here:
Problems with sticky positioning
1 answer
/* site navigation bar */
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p {
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link,
nav.sitenavigation a:visited {
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
color: #33cc00;
}
p{
margin: 2000px;
}<body>
<div>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</div>
<p>ABC
</p>
</body>/* site navigation bar */
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p {
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link,
nav.sitenavigation a:visited {
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
color: #33cc00;
}
p{
margin: 2000px;
}<body>
<div>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</div>
<p>ABC
</p>
</body>html css
html css
asked Nov 21 at 8:22
Ziriki
63
asked Nov 21 at 8:22
Ziriki
63
edited Nov 21 at 8:52
asked Nov 21 at 8:22
Ziriki
63
asked Nov 21 at 8:22
Ziriki
63
asked Nov 21 at 8:22
Ziriki
63
63
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 at 8:55
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 at 8:55
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
The snippet does not demonstrate the problem. Butposition:stickymakes an element only sticky as long as its parent element is visible on the screen. As an example, I made this fiddle that shows the stickyness working fine as long as some of the div content is visible, but it scrolls up with the div after that. Is that what happens in your case?
– Mr Lister
Nov 21 at 8:34
It doesn't stick on top at all.
– Ziriki
Nov 21 at 8:47
remove the div around the navigation and it will work
– Temani Afif
Nov 21 at 8:55
@MrLister there is an extra div in his code which create the issue, the element is sticking to that div but the height of the div is also defined by the sticky element so there is no room for the sticky effect.
– Temani Afif
Nov 21 at 9:05
@TemaniAfif Thanks a lot. It's the div causing the sticky in nav not working
– Ziriki
Nov 21 at 9:19
|
show 1 more comment
The snippet does not demonstrate the problem. Butposition:stickymakes an element only sticky as long as its parent element is visible on the screen. As an example, I made this fiddle that shows the stickyness working fine as long as some of the div content is visible, but it scrolls up with the div after that. Is that what happens in your case?
– Mr Lister
Nov 21 at 8:34
It doesn't stick on top at all.
– Ziriki
Nov 21 at 8:47
remove the div around the navigation and it will work
– Temani Afif
Nov 21 at 8:55
@MrLister there is an extra div in his code which create the issue, the element is sticking to that div but the height of the div is also defined by the sticky element so there is no room for the sticky effect.
– Temani Afif
Nov 21 at 9:05
@TemaniAfif Thanks a lot. It's the div causing the sticky in nav not working
– Ziriki
Nov 21 at 9:19
The snippet does not demonstrate the problem. But
position:sticky makes an element only sticky as long as its parent element is visible on the screen. As an example, I made this fiddle that shows the stickyness working fine as long as some of the div content is visible, but it scrolls up with the div after that. Is that what happens in your case?– Mr Lister
Nov 21 at 8:34
The snippet does not demonstrate the problem. But
position:sticky makes an element only sticky as long as its parent element is visible on the screen. As an example, I made this fiddle that shows the stickyness working fine as long as some of the div content is visible, but it scrolls up with the div after that. Is that what happens in your case?– Mr Lister
Nov 21 at 8:34
It doesn't stick on top at all.
– Ziriki
Nov 21 at 8:47
It doesn't stick on top at all.
– Ziriki
Nov 21 at 8:47
remove the div around the navigation and it will work
– Temani Afif
Nov 21 at 8:55
remove the div around the navigation and it will work
– Temani Afif
Nov 21 at 8:55
@MrLister there is an extra div in his code which create the issue, the element is sticking to that div but the height of the div is also defined by the sticky element so there is no room for the sticky effect.
– Temani Afif
Nov 21 at 9:05
@MrLister there is an extra div in his code which create the issue, the element is sticking to that div but the height of the div is also defined by the sticky element so there is no room for the sticky effect.
– Temani Afif
Nov 21 at 9:05
@TemaniAfif Thanks a lot. It's the div causing the sticky in nav not working
– Ziriki
Nov 21 at 9:19
@TemaniAfif Thanks a lot. It's the div causing the sticky in nav not working
– Ziriki
Nov 21 at 9:19
|
show 1 more comment
3 Answers
3
active
oldest
votes
position: sticky works on when height is enough long.
Can you make div (which in just below on body) to div style="height: 1000px;"?
In my case, that style works well.
answered Nov 21 at 8:31
wormwlrm
564
I have added the margin 2000px to demonstrate the problem
– Ziriki
Nov 21 at 8:48
add a comment |
Set height for a relative container
/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p{
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
color: #33cc00;
}<body>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</body>answered Nov 21 at 8:42
Prince
139113
add a comment |
The position relative you're seeing would be correct as per definition:
A sticky element toggles between relative and fixed, depending on the
scroll position. It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in place (like
position:fixed). https://www.w3schools.com/Css/css_positioning.asp
If your navigation is supposed to stick on top, regardless of the scrolling, you most probably want to use position: absolute instead
answered Nov 21 at 8:30
Michaël Vanderheyden
126111
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
position: sticky works on when height is enough long.
Can you make div (which in just below on body) to div style="height: 1000px;"?
In my case, that style works well.
answered Nov 21 at 8:31
wormwlrm
564
I have added the margin 2000px to demonstrate the problem
– Ziriki
Nov 21 at 8:48
add a comment |
position: sticky works on when height is enough long.
Can you make div (which in just below on body) to div style="height: 1000px;"?
In my case, that style works well.
answered Nov 21 at 8:31
wormwlrm
564
I have added the margin 2000px to demonstrate the problem
– Ziriki
Nov 21 at 8:48
add a comment |
position: sticky works on when height is enough long.
Can you make div (which in just below on body) to div style="height: 1000px;"?
In my case, that style works well.
answered Nov 21 at 8:31
wormwlrm
564
position: sticky works on when height is enough long.
Can you make div (which in just below on body) to div style="height: 1000px;"?
In my case, that style works well.
answered Nov 21 at 8:31
wormwlrm
564
answered Nov 21 at 8:31
wormwlrm
564
answered Nov 21 at 8:31
wormwlrm
564
answered Nov 21 at 8:31
wormwlrm
564
564
I have added the margin 2000px to demonstrate the problem
– Ziriki
Nov 21 at 8:48
add a comment |
I have added the margin 2000px to demonstrate the problem
– Ziriki
Nov 21 at 8:48
I have added the margin 2000px to demonstrate the problem
– Ziriki
Nov 21 at 8:48
I have added the margin 2000px to demonstrate the problem
– Ziriki
Nov 21 at 8:48
add a comment |
Set height for a relative container
/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p{
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
color: #33cc00;
}<body>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</body>answered Nov 21 at 8:42
Prince
139113
add a comment |
Set height for a relative container
/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p{
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
color: #33cc00;
}<body>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</body>answered Nov 21 at 8:42
Prince
139113
add a comment |
Set height for a relative container
/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p{
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
color: #33cc00;
}<body>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</body>answered Nov 21 at 8:42
Prince
139113
Set height for a relative container
/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p{
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
color: #33cc00;
}<body>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</body>/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p{
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
color: #33cc00;
}<body>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</body>/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p{
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
color: #33cc00;
}<body>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</body>answered Nov 21 at 8:42
Prince
139113
answered Nov 21 at 8:42
Prince
139113
answered Nov 21 at 8:42
Prince
139113
answered Nov 21 at 8:42
Prince
139113
139113
add a comment |
add a comment |
The position relative you're seeing would be correct as per definition:
A sticky element toggles between relative and fixed, depending on the
scroll position. It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in place (like
position:fixed). https://www.w3schools.com/Css/css_positioning.asp
If your navigation is supposed to stick on top, regardless of the scrolling, you most probably want to use position: absolute instead
answered Nov 21 at 8:30
Michaël Vanderheyden
126111
add a comment |
The position relative you're seeing would be correct as per definition:
A sticky element toggles between relative and fixed, depending on the
scroll position. It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in place (like
position:fixed). https://www.w3schools.com/Css/css_positioning.asp
If your navigation is supposed to stick on top, regardless of the scrolling, you most probably want to use position: absolute instead
answered Nov 21 at 8:30
Michaël Vanderheyden
126111
add a comment |
The position relative you're seeing would be correct as per definition:
A sticky element toggles between relative and fixed, depending on the
scroll position. It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in place (like
position:fixed). https://www.w3schools.com/Css/css_positioning.asp
If your navigation is supposed to stick on top, regardless of the scrolling, you most probably want to use position: absolute instead
answered Nov 21 at 8:30
Michaël Vanderheyden
126111
The position relative you're seeing would be correct as per definition:
A sticky element toggles between relative and fixed, depending on the
scroll position. It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in place (like
position:fixed). https://www.w3schools.com/Css/css_positioning.asp
If your navigation is supposed to stick on top, regardless of the scrolling, you most probably want to use position: absolute instead
answered Nov 21 at 8:30
Michaël Vanderheyden
126111
answered Nov 21 at 8:30
Michaël Vanderheyden
126111
answered Nov 21 at 8:30
Michaël Vanderheyden
126111
answered Nov 21 at 8:30
Michaël Vanderheyden
126111
126111
add a comment |
add a comment |
The snippet does not demonstrate the problem. But
position:stickymakes an element only sticky as long as its parent element is visible on the screen. As an example, I made this fiddle that shows the stickyness working fine as long as some of the div content is visible, but it scrolls up with the div after that. Is that what happens in your case?– Mr Lister
Nov 21 at 8:34
It doesn't stick on top at all.
– Ziriki
Nov 21 at 8:47
remove the div around the navigation and it will work
– Temani Afif
Nov 21 at 8:55
@MrLister there is an extra div in his code which create the issue, the element is sticking to that div but the height of the div is also defined by the sticky element so there is no room for the sticky effect.
– Temani Afif
Nov 21 at 9:05
@TemaniAfif Thanks a lot. It's the div causing the sticky in nav not working
– Ziriki
Nov 21 at 9:19