Question

我有一些问题在元素上实现绝对定位。我试图实现两个横幅广告，以便在用户滚动div时保持静止。我尝试将父母的位置改为亲戚，而我想要保持静止的孩子绝对。这会使初始位置正确，但我仍然能够滚动绝对div。这是适当的CSS / HTML。

HTML：

FormulaEvaluator objFormulaEvaluator = new HSSFFormulaEvaluator(hWorkbook);
HSSFCell cellValue = row.getCell(1);   //input as 1.00E+13
objFormulaEvaluator.evaluate(cellValue); //result as 10023000000000

CSS：

<div id="pane1">


  <div id="home-banner1" class="banner">

  </div>

  <div id="home-banner2" class="banner">

  </div>

  <?php .....  ?>


</div>

感谢您的帮助！干杯

Answer 1

对横幅使用position:fixed;，这样即使您向上或向下滚动页面，它也会保留在固定位置的屏幕上。

修改

对于仅在#container元素下面隐藏和显示横幅，你可以使用这样的jQuery：

$(window).scroll(function() { var top_div_height = $('#container').height(); // height of the blue top container if ($(this).scrollTop() < top_div_height) { // hide the rightside banner if the user is viewing that blue top container $('#home-banner2').css({ 'display': 'none' }); } else{ //... otherwise show the rightside banner $('#home-banner2').css({ 'display': 'block' }); } });

确保为position:fixed;元素设置CSS规则#home-banner2。

希望这会有所帮助。

Answer 2

实际上，您的代码完全符合预期。

Position: absolute使用position: relative将元素相对于最近的父元素移动。因此，如果父元素超出视口，那么它将执行子绝对元素。

要获得想要的结果，你需要一些javascript / jquery来修复元素，因为它的父元素进入视口，当父元素离开时需要'unfix'。

与Bootstraps' affix

类似的内容

相对和绝对定位的问题

2 个答案: