0

I want an element to be positioned as sticky (not fixed) for it be on the screen everytime when I scroll, lets call it menuV, but I also need it to be positioned as absolute so it doesn´t interact with the the div that sits under it, lets call it todo. The "todo" div covers the full width of the screen (100%) and sits under the "menuV".

In the next code, the "menuV" will show as a light blue div and the "todo" div shows as a grey div.

If I set the "menuV" to absolute, it doesn´t stay on the screen when I scroll, and if I set it to sticky, the "todo" div its placed below the "menuV", because it has a width of 100%, so I need a way to set both positions at the same time.

Here you can see the code:

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

#header {
  width: 100%;
  height: 200px;
  background-color: blueviolet;
  border: 6px solid #5b00b5;
  padding: 0;
}

#div_padre {
  background-color: sandybrown;
  width: 100%;
  border: 6px solid #a86002;
  position: absolute;
}

#menuH {
  position: sticky;
  top: 0;
  height: 50px;
  background-color: royalblue;
  border: 6px solid #0000f5;
}

#menuV {
  width: 50px;
  height: 92vh;
  width: 20%;
  top: 50px;
  position: sticky;
  background-color: #00ffe5;
  border: 6px solid #0079ad;
  float: left;
}

#todo {
  width: 100%;
  background-color: #454545;
  border: 6px solid #000000;
  float: left;
}
<div id="header">HEADER</div>
<div id="div_padre">
  <div id="menuH"></div>
  <div id="menuV"></div>
  <div id="todo">
    <pre style="margin:0;">
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                
                </pre>
  </div>
</div>

I have been doing some researching and the only thing I found is this, which is really what I need, but for some reason, I cant encapsulate the ids of the elements on the css just like they say in the comments.

j08691
  • 204,283
  • 31
  • 260
  • 272
Guillermo P
  • 53
  • 5

2 Answers2

1

Try removing float left from the "todo" div css. I think it should work fine then. Post that adjust the height for your menuV div. Currently it is set at 92vh. Give it a lower value keeping in mind other element height. for eg: try reducing it to 85vh and see if the problem persists.

Bikram Jethi
  • 312
  • 2
  • 11
  • If I set the height of the "menuV" to a 10vh for example, the elements of the "todo" div get pushed to the right until they reach the same bottom of "menuV" div, then they stop getting affected by the "menuV" div. – Guillermo P Dec 16 '19 at 19:13
  • Sorry, can you please try and reframe that ? I didn't get your question ? – Bikram Jethi Dec 16 '19 at 19:18
  • Yes sorry. The first thing that you said worked (remove float: left;), but the second one didn´t because the text that I placed inside the "todo" div got pushed to the right. If you scroll down you will see how the text shows first to the right and then to the left. – Guillermo P Dec 16 '19 at 19:37
  • 1
    So what happens is that, as you might see, the menuV div slips on top of the todo div(that is both the divs are overlapping).What you can do is, as you have given menuV a width of 20%, You can give a left-margin of 20% to your todo div. It will then be placed adjacent to your menuV div. This would avoid the div overlap. You can then align the text within the todo div as per your liking. Would also like to suggest you to use text-align:center if you want to center align the text within the todo div. – Bikram Jethi Dec 16 '19 at 19:46
  • If you don't want to have the text center aligned but want some other spacing use padding instead. Avoid using whitespace to align your content. – Bikram Jethi Dec 16 '19 at 19:46
  • I was looking for the "menuV" to overlap the "todo" div without affecting or formating the content inside it, but that solution works good too. Thank you. – Guillermo P Dec 16 '19 at 20:34
  • Do update if you find a better solution for this. For now I guess you can mark the question as closed by accepting the answer. – Bikram Jethi Dec 16 '19 at 20:36
0

So I finally found the solution:

  • First, I created a new div (the red one), and I put the "menuV" and the "menuH" inside it. Then I set this new div to sticky position and the "menuV" to position absolute. I did this so the "menuV" were sticky and absolute at the same time, and so it didnt break the flow of the brown div.
  • Secondly, as the brown div didnt adjust to the "todo" height because the "todo" div had absolute position too, I created a javaScript function to set the brown div height to be the same that the red div + the grey div, and so now the red div can move with position sticky inside the brown div.

Here you can see the new code:

function menu_vertical() {
        var x = document.getElementById("menuV");
        var y = document.getElementById("todo");

    
        if (x.style.display === "block") {
            x.style.display = "none";
        } else {
            x.style.display = "block";
        }
    }

    var padre=document.querySelector('#div_padre');
    var contenido=document.querySelector('#todo');
    var menus = document.querySelector('#menusHyV');

    padre.style.height=contenido.offsetHeight + menus.offsetHeight + 'px';
*{
            box-sizing: border-box;
        }
        html, body{
            height: 100%;
            margin: 0;     
        }

        #div_padre{
            position: relative;
            background-color:sandybrown;
            width: 100%;
            border: 6px solid #a86002;
        }

        #menusHyV{
            position: sticky;
            top:0;
            background-color: crimson;
            border: 6px solid red;
            z-index: 1;
        }

        #menuH{
            top:0;
            height: 50px;
            width: 100%;
            z-index: 1;
            background-color: royalblue;
            border: 6px solid #0000f5;
        }

        #menuV{
            width: 20%;
            display:none;
            background-color: #00ffe5;
            border: 6px solid #0079ad;
            position: absolute;
        }

        #todo{
            width: 100%;
            background-color: #454545;
            border: 6px solid #000000;
            z-index: 0;
            position:absolute;
        }
    <div id="div_padre">
        <div id="menusHyV">
            <div id="menuH"><button onclick="menu_vertical()">Boton</button></div>
            <div id="menuV"><p>asdasds</p><p>asdasds</p></div>
        </div>
        <div id="todo">
            <pre style="margin:0;">
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
                asd
        
            </pre>
        </div>
    </div>

I found so usefull this post to get the solution.

Guillermo P
  • 53
  • 5