Question

Disclaimer: Ok, so I know it’s super easy to make a top notification bar by hiding a div w/ jQuery at the top of the page and add an event handler to it.

Dilemma: I need to incorporate a notification bar on a page that has the bg image set to the body, so when you show() a div at the top it pushes all content down w/o pushing the bg down and throws off the entire site. I’m trying to avoid wrapping all the content in a div and switching the bg css over to that div in fear of throwing off other child element’s styles.

If anyone is aware of method to push ALL page content down (including the content) I would greatly appreciate any wisdom.

Answer 1

You can use a combination of margin-top on the body element and background-position to offset the background image.

$('#note').show(); // absolute positioned at top of page
$('body').css({marginTop: '50px', backgroundPosition: '0 50px'});