Implementing position sticky on a div depending on its content text - step by step guide

Question

Implementing position sticky on a div depending on its content text - step by step guide

If the text inside the .newsDate matches the previous or next .newsDate, I want to make its position sticky when scrolling, until it reaches the next .newsMiddleCont div.

What I'm trying to achieve:

The same date on multiple news items should stick if they were published on the same day.

The current code is not behaving as intended.

It applies and removes the sticky position to all .newsDate elements instead of only when .newsMiddleCont is visible and when the classes have matching innerText.

EDIT:

Further information:

The sticky behavior should be based on the date in .newsDate.

In my example HTML, the first "28. September 2022." should remain sticky until it reaches the second "28. September 2022."; and then continue until "13. October 1999.", after which it becomes static. This process repeats for similar scenarios.

IMPORTANT:

Dates should scroll uniquely. As we scroll down, the date sticks and moves accordingly. If the next article has the same date, the date shifts to that post. If the dates differ, the date stays at the bottom of the corresponding post and scrolls along with it.

javascript html jquery css

Answer 1

Answer №1

It seems like I've grasped the essence of your query... My suggestion is to make a slight modification to the HTML, incorporating writing-mode: vertical-lr; along with transform: rotate(180deg); for the date section.
Below is an example of how your code could be structured:

body {
  padding: 0;
  margin: 0;
  background-color: #1e1e1e;
}

.sec_pub {
  display: grid;
  grid-gap: 64px;
}

.newsCont {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 870px;
  color: white;
}

.newsLeftCont {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  position: sticky;
  top: 20px;
  border-inline-end: solid 1px #fff;
  padding: 20px;
  margin: 0 20px;
  margin-inline: 20px 0;
  white-space: nowrap;
  align-self: start;
  color: #F05663;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #1e1e1e;
}

.newsContPosts {
  display: grid;
  grid-gap: 96px;
}

.newsMiddleCont {
  padding: 40px 56px;
  background: #242424;
  display: grid;
  grid-gap: 16px;
}

<section class="sec_pub">
 <div class="newsCont">
    <div class="newsLeftCont">27. September 2022.</div>
    <div class="newsContPosts">
    <div class="newsMiddleCont">
      (Content for the first date)
    </div>
    <div class="newsMiddleCont">
      (Additional content for the first date)
    </div>
  </div>
 </div>
...
</section>

Answer 2

It seems like I've grasped the essence of your query... My suggestion is to make a slight modification to the HTML, incorporating writing-mode: vertical-lr; along with transform: rotate(180deg); for the date section.
Below is an example of how your code could be structured:

body {
  padding: 0;
  margin: 0;
  background-color: #1e1e1e;
}

.sec_pub {
  display: grid;
  grid-gap: 64px;
}

.newsCont {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 870px;
  color: white;
}

.newsLeftCont {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  position: sticky;
  top: 20px;
  border-inline-end: solid 1px #fff;
  padding: 20px;
  margin: 0 20px;
  margin-inline: 20px 0;
  white-space: nowrap;
  align-self: start;
  color: #F05663;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #1e1e1e;
}

.newsContPosts {
  display: grid;
  grid-gap: 96px;
}

.newsMiddleCont {
  padding: 40px 56px;
  background: #242424;
  display: grid;
  grid-gap: 16px;
}

<section class="sec_pub">
 <div class="newsCont">
    <div class="newsLeftCont">27. September 2022.</div>
    <div class="newsContPosts">
    <div class="newsMiddleCont">
      (Content for the first date)
    </div>
    <div class="newsMiddleCont">
      (Additional content for the first date)
    </div>
  </div>
 </div>
...
</section>

Answer 3

Answer №2

Furthermore, by utilizing the top attribute, you can position the fixed element in a way that gives it the appearance of being sticky. Make sure to adjust your CSS settings accordingly.

$(window).on("scroll", function() {
  // Retrieve all news items.
  let newsItems = $(".newsCont");

  newsItems.each(function(index) {
// Get the current news date.
let currentDate = $(this).find(".newsDate").text().trim();

// Calculate the scroll top position.
let topPosition = $(this).offset().top - $(window).scrollTop();

// If the current date is '28. September 2022.', 
// and the topPosition is less or equal to 0, then add the sticky class.
if (currentDate === '28. September 2022.' && topPosition <= 0) {
  $(this).find(".newsLeftCont").addClass("sticky");
} else {
  // Remove the sticky class otherwise.
  $(this).find(".newsLeftCont").removeClass("sticky");
}
  });
});

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

... (remaining CSS code remains the same as original)

.sticky {
  position: sticky;
  top: 0;
  visibility: visible;
}

<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 text remains the same as original)
      </div>
    </div>
  </div>
  ... (additional HTML structure remains the same as original)
</section>

Answer 4

Furthermore, by utilizing the top attribute, you can position the fixed element in a way that gives it the appearance of being sticky. Make sure to adjust your CSS settings accordingly.

$(window).on("scroll", function() {
  // Retrieve all news items.
  let newsItems = $(".newsCont");

  newsItems.each(function(index) {
// Get the current news date.
let currentDate = $(this).find(".newsDate").text().trim();

// Calculate the scroll top position.
let topPosition = $(this).offset().top - $(window).scrollTop();

// If the current date is '28. September 2022.', 
// and the topPosition is less or equal to 0, then add the sticky class.
if (currentDate === '28. September 2022.' && topPosition <= 0) {
  $(this).find(".newsLeftCont").addClass("sticky");
} else {
  // Remove the sticky class otherwise.
  $(this).find(".newsLeftCont").removeClass("sticky");
}
  });
});

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

... (remaining CSS code remains the same as original)

.sticky {
  position: sticky;
  top: 0;
  visibility: visible;
}

<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 text remains the same as original)
      </div>
    </div>
  </div>
  ... (additional HTML structure remains the same as original)
</section>

Answer 5

Answer №3

I have created a modified version of the problem you provided. These changes are just minor adjustments

$(window).on('scroll', function() {
  var previousDate = null;

  $('.newsLeftCont').each(function() {
    var newsLeftCont = $(this);
    var newsDate = newsLeftCont.find('.newsDate');
    var isElementVisible = isElementInViewport(newsLeftCont);

    newsLeftCont.addClass('sticky');
    
    if (isElementVisible && newsDate.text().trim().toLowerCase() !== previousDate) {
      newsLeftCont.addClass('sticky');
      previousDate = newsDate;
    } else if(previousDate != null) {
      previousDate.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 ...

/** Note: The remaining code has been truncated for brevity **/

Answer 6

I have created a modified version of the problem you provided. These changes are just minor adjustments

$(window).on('scroll', function() {
  var previousDate = null;

  $('.newsLeftCont').each(function() {
    var newsLeftCont = $(this);
    var newsDate = newsLeftCont.find('.newsDate');
    var isElementVisible = isElementInViewport(newsLeftCont);

    newsLeftCont.addClass('sticky');
    
    if (isElementVisible && newsDate.text().trim().toLowerCase() !== previousDate) {
      newsLeftCont.addClass('sticky');
      previousDate = newsDate;
    } else if(previousDate != null) {
      previousDate.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 ...

/** Note: The remaining code has been truncated for brevity **/

Implementing position sticky on a div depending on its content text - step by step guide

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to display all of them inline in Woocommerce?

Establish a predetermined selection for a drop-down menu

Get immediate results in real-time

"Utilizing AJAX for Data Retrieval in a Form with Dynamically Generated

There are multiple ways to extract a value from Python code and assign it to a JavaScript variable in a JS file

`How can you adjust the language preferences for users in Meteor?`

Modify the shading of the mesh generated with the face3 method

What is the reason for npm and yarn to download multiple versions of jquery?

What exactly does the term "library" refer to in the context of jQuery, a JavaScript

Using a loop to format the <ol> tag

React-Native Error: Invalid element type detected

Transforming JSON data in Node JS according to the city

Passing data in object as key value after serializing using jQuery AJAX sortable is a common and

Gulp does not generate any files

In the case of a PDF being in landscape orientation, the full width of the document is not utilized despite the width being set to

Configuring IP Whitelisting for Firebase Cloud Functions with MongoDB Cluster

Using CSS units such as vw, vh, or percentage to specify height is not possible

Having trouble with the toggle button on the Bootstrap 5 navbar?

Table borders not displaying properly in Chrome when cells are hidden

HTML video audio playing, but screen remains empty