Whenever my div is scrolled to, it becomes fixed. At that point, I want the div to expand to full width. I achieved this by adding width: 100% to the div. However, the issue is that I want the content of the div to align with the rest of the page content, instead of moving to the left. I need a solution without changing the current HTML structure.
Example: The div should be full width when it becomes fixed upon scrolling.
Check out the fiddle: https://jsfiddle.net/DTcHh/19335/
Example: Adding left padding helps in aligning the content correctly. But, the challenge is determining the ideal amount of padding - is there a reliable method for this?
Check out the fiddle: https://jsfiddle.net/DTcHh/19337/
CSS:
#myDiv.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Jquery:
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet) {
$("#myDiv").addClass('fixed');
}
});