固定div位置时的jQuery Offset问题

Question

我有一个网站，该网站的页面布局和样式类似于此JsFiddle中所述

现在，当我单击按钮时使用JQuery时，内容将正确显示，如下所示：

但是，当我第一次滚动页面然后单击按钮时，内容无法正确显示，如下所示：

您能指导我处理这种情况吗？

我已经在jQuery下面使用过此功能。 但似乎offset或position不起作用

$('#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

此处无需专门提及position属性。

也除去封闭a标签，并用其替换</button>

当前容器正在占用全宽，但也可以设置

 $('#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

您无需使用offset即可实现这一点...并且，如果需要保持CSS的position:fixed ，则需要在javascript中将其切换为static 。

您正在寻找的东西只是display:table ...

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

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

看看这个JSFiddle

---

但是，如果您确实需要根据button位置position:fixed了position:fixed的解决方案，则应尝试以下方式：

$('#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'});
});

查看第二个JSFiddle

Answer 3

CSS position fixed属性可定位引用视图/主体尺寸的元素。

如果您有权修改CSS ，则只需移除position: fixed; .control-container属性。

如果您没有访问权限，请使用脚本在.control-container添加position: static !important属性。

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

修改后的JSFiddle