I have a fixed wrap div on my page that I want to reposition after scrolling. My attempt using jQuery resulted in the div being too high and overlapping the footer.
Snippet from my code:
Below is the revised code snippet:
var elementPosition = $('#fixed-wrapper').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#fixed-wrapper').css('position', 'fixed').css('top', '0').css('margin', '20px 1%');
} else {
$('#fixed-wrapper').css('position', 'static');
}
});#header {
width: 101%;
padding: 10px 0px 0px;
margin: -10px -10px 10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
min-width: 700px;
}
#main-bets{
display: table;
float: left;
width: 68%;
margin-left: 7%;
margin-top: 20px;
margin-bottom: 30px;
min-width: 900px;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.5);
}
#fixed-wrapper {
display: table;
float: right;
width: 22%;
right: 5px;
margin: 20px 1%;
max-width: 300px;
}
#footer {
width: 101%;
padding: 10px 0px 0px;
margin: 20px -10px -10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
clear: both;
}<div id="header">
...
</div>
<div id="main-bets
...
</div>
<div id="fixed-wrapper">
....
</div>
<div id="footer">
...
</div>