Question

I have a problem with positioning a Hello Bar. In the CSS, it’s relative which pushed the site down. To fix this, I use this javascript function:

 <script language="javascript">
 $(window).scroll(function(){
 var $this = $(this);
 $("#hello_bar").css("position", "fixed");
 $('#hello_bar').css('position', "absolute" - $this.scrollTop());
 });
 </script>

If I scroll down the page and get back up to site top than the content is behind the Bar.. How can I fix this?

Answer 1

Set the padding-top on the next element (the p tag) to have a padding-top equivalent to the height and padding-top / padding-bottom of the #hello_bar div. This number in your case is 60px. Also, take note that you should really perform this function only once, since it will be a waste of CPU resources after it has already been performed once.

var executedOnceBool = false;    
$(window).scroll(function(){
 if (true === executedOnceBool) {
     return;
 }
 var helloBarEl = $("#hello_bar"),
     nextEl = helloBarEl.next();  // p
     nextElPaddingTopNum = helloBarEl.css('padding-top')
         + parseInt(helloBarEl.css('padding-bottom'))  // 10
         + parseInt(helloBarEl.css('padding-top')) // 10
         + helloBarEl.css('height'); // 40, total = 60

     nextEl.css('padding-top', nextElPaddingTopNum + 'px');
     executedOnceBool = true;
 });