When the "link" on the sticky header is clicked in this scenario, how can I ensure that the linked content item (#mypara) appears below the sticky div rather than directly underneath it where it may be hidden?
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#sticky').addClass('fixed');
}
else
{
$('#sticky').removeClass('fixed');
}
});
});body { margin: 0px; background-color: #e3e3e3; }
#header { background-color: #cb5454; height: 140px; }
#sticky {
background-color: #546bcb;
height: 70px;
}
#sticky.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
p[id] {
color:red;
/*padding-top: 170px;*/
}
#footer { background-color: #cb5454; height: 140px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">header</div>
<div id="sticky">sticky <a href="#mypara">link</a></div>
<div id="section">
...
... (truncated for brevity)
...
<p>section </p>
<p>section </p>
</div>
<div id="footer">foot</div>This particular fiddle was attained from discussions on other SO threads, suggesting that using 'position:fixed' for a sticky div after scrolling is a common approach since 'position:sticky' did not yield the desired results.
https://i.sstatic.net/7iFvi.png
The image above highlights the desired positioning when the link is clicked.