Question

我正在寻找一种在页面滚动时动态更改div高度的方法。这是因为我在屏幕右侧有一个固定面板，顶部有一个菜单横幅。

当位于页面顶部时，侧面板的顶部接触顶部横幅的底部。事实是，当页面向下滚动并且横幅离开屏幕时，这会在屏幕顶部和侧面板顶部之间留下顶部横幅大小的间隙。我想在它们之间加一个div，当页面向下滚动时，它会增加高度。有没有办法在css或js中这样做？

我不能让侧面板具有100％的高度，因为它会隐藏顶部横幅上的一些元素，尤其是在较低分辨率的屏幕上。

我在油漆上添加了一些丑陋的图像来解释：

这是侧面板的css：

position: fixed;
right: 0;
top: 180px;
height:calc(100% - 180px);

Answer 1

您好我不太了解您的横幅情况..但是根据您的需要，您可以在滚动时调用js函数：

<body> 
<div class="content" onscroll="dynamicheight()">
</div>

<script>
function dynamicheight() {
    var content = document.getElementById("content");
    var y = content.scrollTop;
    document.getElementById('random').style.height = y;
}
</script>

这样，id随机的div将根据你滚动的数量而增长。显然你必须根据自己的意愿进行调整。希望这可以指导你一点。

Answer 2

根据您的问题，您必须在向右滚动时将面板粘贴到视口顶部？

为此目的，你可以欺骗一些等于菜单栏高度的负边距，如

Check this fiddle here

＆＃13;

$(window).scroll(function() {
    if ($(".sidepanel").offset().top > 50) {
        $(".sidepanel").addClass("stick-top");
    } else {
        $(".sidepanel").removeClass("stick-top");
    }
});

＆＃13;

body{
  margin:0;
  padding:0;
  height:1000px
}
.menu{
  width:100%;
  height:50px;
  background:#111111
}
.sidepanel{
  width:200px;
  height:200px;
  background:#888888;
  position:fixed;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}

.sidepanel.stick-top{
  margin-top:-50px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>


<div class="menu"></div>
<div class="sidepanel"></div>

＆＃13;

Answer 3

首先根据您可以自动调整的内容查看。

How to make sidebar with same height as the content div?

页面向下滚动时扩展div的高度

3 个答案: