0

I have a fixed header, because it is fixed it eats some of the page, so I need to add a margin-top to the first-page-content. I thought about using a jQuery script that checks the header's rendered height and add that as the margin-top to the first-page-content. It works, though at times I need to refresh the page, and that's quite troublesome for users.

Script (at the footer):

$(document).ready(function(){ // This function is activated after the document is loaded
  $('.first-page-content').css('margin-top', $('#header').height()); // Sets the margin-top of the first-page-content as the height of the header
});

In case you need the jQuery API documentation

Edit: When it doesn't work the header eats some of the .first-page-content, because there is no margin-top.

RaulS
  • 43
  • 6
  • First off, if the script is in the footer, you don't need the document ready. Secondly, you didn't state "why" you have to refresh. What the actual problem is. – Taplar Oct 27 '17 at 14:32
  • @Taplar, thanks, I'll remove the `$(document).ready()` :] – RaulS Oct 27 '17 at 14:39

2 Answers2

0

Solved it using:

$(window).on('load', function(){
  $('.first-page-content').css('margin-top', $('#header').height()); // Sets the margin-top of the first-page-content as the height of the header
});

reference

RaulS
  • 43
  • 6
0

Read about:

setInterval(my_function,500);

Then Your function that remove/create margin will be refreshed always after 0.5 seconds.

Wordica
  • 2,427
  • 3
  • 31
  • 51