1

I'm looking for a way to dynamically change a div's height when a page scrolls. This is because I have a fixed panel on the right side of the screen, and a menu banner at the top.

When at the top of the page, the top of the side panel touches the bottom of the banner at the top. Thing is, when the page is scrolled down and the banner leaves the screen, this leaves a gap the size of the top banner between the top of the screen and the top of the side panel. I'd like to put a div between them that would grow in height when the page is scrolled down. Is there a way in css or js to do so ?

I can't just have the side panel have 100% height because it would hide some elements on the top banner, especially on lower resolution screens.

I added some ugly images made on paint to explain :

enter image description here enter image description here

This is the css for the side panel :

position: fixed;
right: 0;
top: 180px;
height:calc(100% - 180px);
Saryk
  • 345
  • 1
  • 12
  • Not sure you're asking the right question. Why would you "like to put a div between them that would grow in height when the page is scrolled down"? – phuzi Jul 12 '16 at 12:20
  • Post the code which you tried or reproduce the issue in [fiddle](http://jsfiddle.net) – Pugazh Jul 12 '16 at 12:22
  • @phuzi I updated the question with some images – Saryk Jul 12 '16 at 12:37
  • You could put a fixed div behind the banner that sits above the side panel that gets revealed as the page scrolls. Pure CSS – phuzi Jul 12 '16 at 12:43
  • @phuzi I could if the site I'm working on was well coded, except that what I call my banner is just a red image that is 2 pixels wide and that gets 'repeat-x' at the top of the page... – Saryk Jul 12 '16 at 12:48

3 Answers3

1

Hello I do not really understand your banner situation.. but regarding what you need, you can just call a js function whenever you scroll:

<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>

This way the div with the id random will grow according to how much you scroll. Obviously you have to adjust it to your wishes. Hope this could guide you a bit.

K Nugal
  • 134
  • 9
  • This doesn't seem to work unfortunately, I tried using other values instead of height and none seem to get updated... – Saryk Jul 12 '16 at 12:59
  • Hi sry I should have changed the code a bit it. You need to add px to the value. Try this code: document.getElementById('random').style.height = y+"px"; – K Nugal Jul 12 '16 at 13:04
  • @K Nugal I already tried this. (you also forgot a " in the code above btw) – Saryk Jul 12 '16 at 13:10
  • I have wrapped everything on the page between
    – Saryk Jul 12 '16 at 13:17
  • Since I do not know your code, I can only assume... I created a fiddle https://jsfiddle.net/mdoLaxtL/ hope this will help you. I fixed the missing " :) thanks – K Nugal Jul 12 '16 at 13:19
  • Your fiddle works fine, but how would I apply this to the entire page being scrolled ? I even tried adding the onscroll="dynamicheight()" to the – Saryk Jul 12 '16 at 13:25
  • Well to be honest yes.. It looks ugly but you can actually call it on the body tag. Otherwise just wrap the whole content in another div which starts at the body tag. I changed the fiddle https://jsfiddle.net/mdoLaxtL/4/ – K Nugal Jul 12 '16 at 13:33
0

As per your question, you have to stick Panel to the top of viewport on scroll right?

For that purpose you can trick some negative margin equal to the height of menu bar like,

Check this fiddle here

$(window).scroll(function() {
    if ($(".sidepanel").offset().top > 50) {
        $(".sidepanel").addClass("stick-top");
    } else {
        $(".sidepanel").removeClass("stick-top");
    }
});
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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>


<div class="menu"></div>
<div class="sidepanel"></div>
Saurabh Sonawane
  • 941
  • 7
  • 9
0

See first based on the content you can adjust it automatically.

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

Community
  • 1
  • 1
Ranjan
  • 929
  • 1
  • 6
  • 19