Question:

How to make sticky div remain stuck in JavaScript?

Problem:

My web page has 3 divs. I have made the second div sticky. My expectation was that when I scroll div1 would scroll off the top, div2 would stick when it reached the top, and then div3 would scroll over div2 and off the top leaving div2 still stuck in place. Instead what actually happens is that when div3 reaches the top it and div2 both scroll off the top together.

Can anyone suggest a way to accomplish what I want?

Regarding the example code: Use the checkbox to make div2's position be either sticky or relative like the others.

window.onload = function() {

$('#divGroup2Sticky').change(function() {

let divName = 'divGroup2'

let div = $(`#${divName}`)

if (this.checked) {

div.css('position', 'sticky')

div.css('top', '1vh')

div.css('left', 'auto')

}

else {

div.css('position', 'relative')

div.css('top', '0px')

div.css('left', '0px')

}

})

}

html {

height: 500vh;

}

body {

background-color: gray;

}

.divGroup {

position: relative;

margin-top: 1vh;

margin-left: 1vh;

width: 98vw;

height: 98vh;

background-color: darkgray;

border: solid red 1px;

}

.innerDiv {

position: absolute;

top: 50%;

left: 50%;

translate: -50% -50%;

width: 80%;

height: 80%;

}

p {

margin: 0;

font-size: 25px;

text-align: center;

}

#checkbox {

position: fixed;

top: 2vh;

left: 2vw;

background-color: #D3D3D3;

border: 1px solid black;

border-radius: 5px;

padding: 4px;

z-index: 3;

}

<head>

</head>

<body>

<label for="divGroup2Sticky">Div Group 2 Sticky</label>

</div>

<p>Div Group 1</p>

</div>

<p>Div Group 2</p>

</div>

<p>Div Group 3</p>

</div>

</body>

Solution:

The solution to your problem is setting height of the body to 100%. The reason for this is that the parent container of the sticky element must have a defined height. Even if the height of html is set to 500vh the parent element of your div is the body so the body has to have a defined height in order for div2 to be sticky.

>Why `import` does not work in this case (in `exec`)?

>Fix my form calling the wrong Django view error

>How to load static files using Nginx, Docker, and Django?

>How to tell Django "if anything in urlpatterns does not match the GET string?

>How can I browser to render links in streamed content in Django?

>Access the "model" attribute for a ListView in Django for template

>How to use a function to print S3 data to HTML using Django?

>How to make a code executed after an entry is inserted, removed or updated?