JQuery Offset issue when div position is fixed

Question

I have a website which has a page layout and style something like mentioned in this JsFiddle

Now Using JQuery when I click on the button, content is being displayed properly as shown below:

But when I first scroll the page and then click the button, content is not displaying properly as shown:

Can you please guide me to handle this situation ?

I have used below jQuery for this. But it seems offset or position is not working

$('#btn').click(function(){
    var t = $(this).offset();
  console.log(t);
  $('.control-container').css('top', t.top + 20 + 'px');
  $('.control-container').css('display', 'block');
});

$(document).on('scroll', function(){
$('.control-container').css('display', 'none');
});

Answer 1

There is no need to specifically mention position property here.

Also remove the closing a tag and replace it with </button>

Currently container is occupying full width ,but that can also be set

 $('#btn').click(function() { var t = $(this).offset(); console.log(t); $('.control-container').css('top', t.top + 30 + 'px'); $('.control-container').css('display', 'block'); }); $(document).on('scroll', function() { $('.control-container').css('display', 'none'); }); 

 .header { background-color: maroon; color: #fafafa; height: 60px; position: fixed; width: 100%; text-align: center; line-height: 19px; font-size: 25px; z-index: 2; padding: 0px; margin: 0px; top: 0; } .content { background-color: #fff; border: 1px solid #999; padding: 5px; height: 100%; width: 100%; position: absolute; z-index: 1; top: 60px; } .control-container { width: auto; background-color: red; #position: fixed; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="header"> Header </div> <div style="clear:both"> </div> <div class="content"> <br/> <br/> <br/> <br/> <br/> <button id="btn">Click Me</button> <div class="control-container" style="display:none;"> Keep me exactly underneath 'Click Me' when Page is scrolled. </div> </div> </div> 

Answer 2

You don't need to use offset to achieve that... And if you need to keep CSS with position:fixed , you need to switch it in javascript to static .

The thing you are looking for is simply display:table ...

$('#btn').click(function(){
  $('.control-container').css({'display': 'table','position': 'static'});
});

$(document).on('scroll', function(){
   $('.control-container').css({'display': 'none','position': 'fixed'});
});

Check out this JSFiddle

---

But if you really need a solution with position:fixed based on button position, you should try this way:

$('#btn').click(function(){
    var button_fixed_position = $('#btn').get(0).getBoundingClientRect();
  $('.control-container').css({'display': 'block','left' : button_fixed_position.left, 'top' : button_fixed_position.bottom});
});

$(document).on('scroll', function(){
   $('.control-container').css({'display': 'none'});
});

Check out second JSFiddle

Answer 3

CSS position fixed property positions an element referencing view's/body's dimension.

If you have access of modifying CSS , then just remove the position: fixed; property from .control-container .

If you don't have access, then using script add position: static !important property to .control-container .

$('.control-container').css('cssText', 'position: static !important');

Modified JSFiddle