固定DIV定位问题

Question

我一直在处理我的报告模板，无法确定详细信息的位置（右侧）：http://relevantcodes.com/Tools/ExtentReports2/ExtentJava210.html

我遇到滚动问题，我无法弄明白。请参阅下面的2张图片：

滚动前：

滚动后：

在第二张图像中，当左侧大小（存储所有测试的位置）发生滚动时，请注意顶部的额外空间。它发生在DIV固定但是我想知道当我们向下滚动时是否有办法将它定位到顶部？

另一个问题是，当我们打开菜单时（通过单击左上角的条形图），左侧容器与右侧容器重叠。我该如何解决这个问题？使用js为右容器设置新的宽度是一个好方法吗？

很想听听你的建议，希望能找到一个优雅的解决方案来解决这个问题，我无法弄明白。

Answer 1

对于您的第一个问题，我相信您能够通过javascript监听器完成的唯一方式 - 在用户滚动并将位置从var gallery = require( "./server" ); describe( "Gallery", function() { var picArray = [ "/gallery/public/img/dir1/lizard-248705_1280.jpg", "/gallery/public/img/dir1/loch-ness-151851_1280.png", "/gallery/public/img/dir1/sand-lizard-63185_1280.jpg", "/gallery/public/img/dir1/stegosaurus-24752_1280.png"]; it( "walks the images directory", function(){ expect(gallery.walk()).toEqual(picArray); }); }); 更改为{{1}时进行监听他们向下滚动position:absolute/relative后。 免责声明：可能有一种css方式，我不知道这样做。

对于重叠的第二个问题，我会将滑出的div设置为position:fixed，这样它就不会移动整个页面（并重新绘制所有元素的资源），而是滑过其余部分内容。也许在它背后隐藏背后的内容。

希望这有帮助。

Answer 2

如果你删除第二列上的fixed位置，你的第二个问题就会消失，所有内容都会很好地重新排列。我想说最好的方法是从CSS中删除.pinned规则并用JS处理列的位置。

获取导航和仪表板的高度（无论是否可见），然后将生成的高度与滚动位置进行比较。有了它，您应该能够将该列精确地放置在您想要的位置。

Answer 3

问题1

1.在文件（materialize.min.css）的第6行删除.pinned { position: fixed !important;} 2.使用JS

$('.vh100').css('position', 'absolute')// to add aboslute position by default.
$(window).scroll(function() {
  if ($(window).scrollTop() > 48) // nav bar height is 48 px
  {
    $('.vh100').css('position', 'fixed'); // add position fixed if scrolling is done and scroll top is greater than 48 px which is the nav bar
    $('.vh100').css('margin-top', '-48px'); // when scroll up you have assign negative margin-top so that the space will not be appeared.
  } else {
    $('.vh100').removeAttr('style'); // remove margin-top
    $('.vh100').css('position', 'absolute'); // and add position absolute
  }
});

问题2（ExternalJava210.html - ＆gt; Line：3273）

点击.vh100时添加和删除.menu-toggle的位置。