I’d like to set the position: sticky when the innerText of the .newsDate is different than previous .newsDate, onScroll, until reaching the next .newsMiddleCont div.
I have the code below, which is not working the way I would like it to.
It adds and removes sticky position to all of the .newsDate, and not while the .newsMiddleCont is visible, and regardless whether the classes are or aren’t the same based on the innerText.
EDIT:
A bit more explanation:
The sticky has to depend on the date inside .newsDate. In my example html, the first "28. September 2022." has to stay sticky until it reaches the second "28. September 2022."; and beyond until it reaches "13. October 1999.", then it should lose the sticky and change to static. And then this should happen again in a similar scenario.
$(window).on('scroll', function() {
var previousDate = null;
$('.newsLeftCont').each(function() {
var newsLeftCont = $(this);
var newsDate = newsLeftCont.find('.newsDate');
var isElementVisible = isElementInViewport(newsLeftCont);
if (isElementVisible && newsDate.text().trim() !== previousDate) {
newsLeftCont.addClass('sticky');
previousDate = newsDate.text().trim();
} else {
newsLeftCont.removeClass('sticky');
}
var nextNewsMiddleCont = newsLeftCont.next('.newsMiddleCont');
if (nextNewsMiddleCont.length && isElementInViewport(nextNewsMiddleCont)) {
newsLeftCont.removeClass('sticky');
}
});
});
function isElementInViewport(element) {
var rect = element[0].getBoundingClientRect();
return rect.top >= 0 && rect.bottom <= $(window).height();
}html,
body {
padding: 0;
margin: 0;
background-color: #1e1e1e;
}
.newsCont {
max-width: 870px;
min-height: 756px;
position: relative;
color: white;
}
.newsLeftCont {
height: 222px;
padding-top: 40px;
padding-bottom: 40px;
left: 0px;
top: 50px;
position: absolute;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
display: inline-flex;
}
.newsLeftContInner {
align-self: stretch;
padding-top: 16px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
display: flex;
height: 160px;
}
.newsDate {
transform: rotate(-90deg);
transform-origin: 0 0;
color: #F05663;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
word-wrap: break-word;
width: 140px;
border-right: 0.50px #D6D6D6 solid;
height: 40px;
line-height: 37px;
top: 50px;
position: relative;
background-color: #1e1e1e;
}
.newsMiddleCont {
padding-left: 56px;
padding-right: 56px;
padding-top: 40px;
padding-bottom: 40px;
left: 76px;
top: 0px;
position: absolute;
background: #242424;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 16px;
display: inline-flex
}
.newsLeftCont {
position: static;
}
.sticky {
position: sticky;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sec_pub">
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis tellus id interdum. Sit amet nisl purus in mollis nunc sed id semper. Pharetra magna ac placerat
vestibulum lectus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Neque ornare aenean euismod elementum nisi quis. Risus nullam eget felis eget nunc lobortis mattis aliquam. Vitae nunc sed velit dignissim sodales ut eu sem. Ullamcorper
morbi tincidunt ornare massa. Consequat mauris nunc congue nisi. Morbi blandit cursus risus at ultrices mi. Tellus orci ac auctor augue mauris. Id diam vel quam elementum pulvinar etiam non quam lacus. Sem fringilla ut morbi tincidunt augue interdum
velit euismod. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.<br>Sed augue lacus viverra vitae congue. Molestie ac feugiat sed lectus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere. Arcu dictum varius duis at consectetur lorem donec. Auctor elit sed vulputate mi sit amet mauris commodo quis. Mi sit amet mauris commodo quis. Lectus urna duis convallis convallis. Ante
in nibh mauris cursus mattis molestie a iaculis. Curabitur vitae nunc sed velit dignissim sodales ut eu. Malesuada nunc vel risus commodo viverra maecenas. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Sed elementum
tempus egestas sed sed risus pretium quam vulputate. Magna etiam tempor orci eu. Placerat in egestas erat imperdiet sed euismod nisi porta.
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis tellus id interdum. Sit amet nisl purus in mollis nunc sed id semper. Pharetra magna ac placerat
vestibulum lectus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Neque ornare aenean euismod elementum nisi quis. Risus nullam eget felis eget nunc lobortis mattis aliquam. Vitae nunc sed velit dignissim sodales ut eu sem. Ullamcorper
morbi tincidunt ornare massa. Consequat mauris nunc congue nisi. Morbi blandit cursus risus at ultrices mi. Tellus orci ac auctor augue mauris. Id diam vel quam elementum pulvinar etiam non quam lacus. Sem fringilla ut morbi tincidunt augue interdum
velit euismod. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.<br>Sed augue lacus viverra vitae congue. Molestie ac feugiat sed lectus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere. Arcu dictum varius duis at consectetur lorem donec. Auctor elit sed vulputate mi sit amet mauris commodo quis. Mi sit amet mauris commodo quis. Lectus urna duis convallis convallis. Ante
in nibh mauris cursus mattis molestie a iaculis. Curabitur vitae nunc sed velit dignissim sodales ut eu. Malesuada nunc vel risus commodo viverra maecenas. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Sed elementum
tempus egestas sed sed risus pretium quam vulputate. Magna etiam tempor orci eu. Placerat in egestas erat imperdiet sed euismod nisi porta.
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">13. October 1999.</div>
</div>
</div>
<div class="newsMiddleCont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis tellus id interdum. Sit amet nisl purus in mollis nunc sed id semper. Pharetra magna ac placerat
vestibulum lectus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Neque ornare aenean euismod elementum nisi quis. Risus nullam eget felis eget nunc lobortis mattis aliquam. Vitae nunc sed velit dignissim sodales ut eu sem. Ullamcorper
morbi tincidunt ornare massa. Consequat mauris nunc congue nisi. Morbi blandit cursus risus at ultrices mi. Tellus orci ac auctor augue mauris. Id diam vel quam elementum pulvinar etiam non quam lacus. Sem fringilla ut morbi tincidunt augue interdum
velit euismod. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.<br>Sed augue lacus viverra vitae congue. Molestie ac feugiat sed lectus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere. Arcu dictum varius duis at consectetur lorem donec. Auctor elit sed vulputate mi sit amet mauris commodo quis. Mi sit amet mauris commodo quis. Lectus urna duis convallis convallis. Ante
in nibh mauris cursus mattis molestie a iaculis. Curabitur vitae nunc sed velit dignissim sodales ut eu. Malesuada nunc vel risus commodo viverra maecenas. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Sed elementum
tempus egestas sed sed risus pretium quam vulputate. Magna etiam tempor orci eu. Placerat in egestas erat imperdiet sed euismod nisi porta.
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">13. October 1999.</div>
</div>
</div>
<div class="newsMiddleCont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis tellus id interdum. Sit amet nisl purus in mollis nunc sed id semper. Pharetra magna ac placerat
vestibulum lectus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Neque ornare aenean euismod elementum nisi quis. Risus nullam eget felis eget nunc lobortis mattis aliquam. Vitae nunc sed velit dignissim sodales ut eu sem. Ullamcorper
morbi tincidunt ornare massa. Consequat mauris nunc congue nisi. Morbi blandit cursus risus at ultrices mi. Tellus orci ac auctor augue mauris. Id diam vel quam elementum pulvinar etiam non quam lacus. Sem fringilla ut morbi tincidunt augue interdum
velit euismod. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.<br>Sed augue lacus viverra vitae congue. Molestie ac feugiat sed lectus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere. Arcu dictum varius duis at consectetur lorem donec. Auctor elit sed vulputate mi sit amet mauris commodo quis. Mi sit amet mauris commodo quis. Lectus urna duis convallis convallis. Ante
in nibh mauris cursus mattis molestie a iaculis. Curabitur vitae nunc sed velit dignissim sodales ut eu. Malesuada nunc vel risus commodo viverra maecenas. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Sed elementum
tempus egestas sed sed risus pretium quam vulputate. Magna etiam tempor orci eu. Placerat in egestas erat imperdiet sed euismod nisi porta.
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">13. October 1999.</div>
</div>
</div>
<div class="newsMiddleCont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis tellus id interdum. Sit amet nisl purus in mollis nunc sed id semper. Pharetra magna ac placerat
vestibulum lectus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Neque ornare aenean euismod elementum nisi quis. Risus nullam eget felis eget nunc lobortis mattis aliquam. Vitae nunc sed velit dignissim sodales ut eu sem. Ullamcorper
morbi tincidunt ornare massa. Consequat mauris nunc congue nisi. Morbi blandit cursus risus at ultrices mi. Tellus orci ac auctor augue mauris. Id diam vel quam elementum pulvinar etiam non quam lacus. Sem fringilla ut morbi tincidunt augue interdum
velit euismod. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.<br>Sed augue lacus viverra vitae congue. Molestie ac feugiat sed lectus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere. Arcu dictum varius duis at consectetur lorem donec. Auctor elit sed vulputate mi sit amet mauris commodo quis. Mi sit amet mauris commodo quis. Lectus urna duis convallis convallis. Ante
in nibh mauris cursus mattis molestie a iaculis. Curabitur vitae nunc sed velit dignissim sodales ut eu. Malesuada nunc vel risus commodo viverra maecenas. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Sed elementum
tempus egestas sed sed risus pretium quam vulputate. Magna etiam tempor orci eu. Placerat in egestas erat imperdiet sed euismod nisi porta.
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis tellus id interdum. Sit amet nisl purus in mollis nunc sed id semper. Pharetra magna ac placerat
vestibulum lectus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Neque ornare aenean euismod elementum nisi quis. Risus nullam eget felis eget nunc lobortis mattis aliquam. Vitae nunc sed velit dignissim sodales ut eu sem. Ullamcorper
morbi tincidunt ornare massa. Consequat mauris nunc congue nisi. Morbi blandit cursus risus at ultrices mi. Tellus orci ac auctor augue mauris. Id diam vel quam elementum pulvinar etiam non quam lacus. Sem fringilla ut morbi tincidunt augue interdum
velit euismod. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.<br>Sed augue lacus viverra vitae congue. Molestie ac feugiat sed lectus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere. Arcu dictum varius duis at consectetur lorem donec. Auctor elit sed vulputate mi sit amet mauris commodo quis. Mi sit amet mauris commodo quis. Lectus urna duis convallis convallis. Ante
in nibh mauris cursus mattis molestie a iaculis. Curabitur vitae nunc sed velit dignissim sodales ut eu. Malesuada nunc vel risus commodo viverra maecenas. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Sed elementum
tempus egestas sed sed risus pretium quam vulputate. Magna etiam tempor orci eu. Placerat in egestas erat imperdiet sed euismod nisi porta.
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus urna duis convallis convallis tellus id interdum. Sit amet nisl purus in mollis nunc sed id semper. Pharetra magna ac placerat
vestibulum lectus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Neque ornare aenean euismod elementum nisi quis. Risus nullam eget felis eget nunc lobortis mattis aliquam. Vitae nunc sed velit dignissim sodales ut eu sem. Ullamcorper
morbi tincidunt ornare massa. Consequat mauris nunc congue nisi. Morbi blandit cursus risus at ultrices mi. Tellus orci ac auctor augue mauris. Id diam vel quam elementum pulvinar etiam non quam lacus. Sem fringilla ut morbi tincidunt augue interdum
velit euismod. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.<br>Sed augue lacus viverra vitae congue. Molestie ac feugiat sed lectus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Enim nulla
aliquet porttitor lacus luctus accumsan tortor posuere. Arcu dictum varius duis at consectetur lorem donec. Auctor elit sed vulputate mi sit amet mauris commodo quis. Mi sit amet mauris commodo quis. Lectus urna duis convallis convallis. Ante
in nibh mauris cursus mattis molestie a iaculis. Curabitur vitae nunc sed velit dignissim sodales ut eu. Malesuada nunc vel risus commodo viverra maecenas. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Sed elementum
tempus egestas sed sed risus pretium quam vulputate. Magna etiam tempor orci eu. Placerat in egestas erat imperdiet sed euismod nisi porta.
</div>
</div>
</div>
</section>
2
Answers
Also, using the top property, the fixed element can be positioned to look like it’s sticky. Remember to update your CSS accordingly.
I have made my version of the problem you have given.
This is only some small changes made