jquery 如何在一个div上根据它的innerText应用position sticky？

zz2j4svz  于 2023-08-04  发布在  jQuery
关注(0)|答案(3)|浏览(80)

当.newsDate的innerText与前一个或下一个.newsDate相同时，我想设置position: sticky，onScroll，直到到达下一个.newsMiddleCont div。
目标是什么：
对于多个新闻条目，如果它们在同一天发布，则同一日期可以保持粘性
我有下面的代码，这是不工作的方式，我希望它。
它将stickyposition添加到所有的.newsDate中，而不是在.newsMiddleCont可见时，也不管这些类是否基于innerText相同。

编辑：

再解释一下：

粘滞性必须依赖于.newsDate中的日期。

  • 在我的示例html中，第一个“28. 2022年9月28日，“必须保持粘性，直到它达到第二个”。2022年9月”;直到它达到“13”。1999年10月。"，那么它就应该失去粘性，改为静态。在类似的场景中，这种情况应该会再次发生。*
    重要提示：

日期具有独特的滚动动画。当我们向下滚动时，日期会以粘滞模式出现。如果下一篇文章的日期是相同的，它（日期）也会继续到该帖子。如果下一篇文章的日期不同，则日期在相应文章的底部停止并继续滚动文章。
“滚动动画”是指滚动行为（保持静止和/或沿着移动）。“它”是日期。如果第二个日期与第一个相同，则日期滚动到下一个“帖子”。如果日期不同，则日期会在帖子的末尾停止，并且当我们滚动它（日期）时，它会随着帖子一起移动，然后随着帖子离开视口。

$(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>
jquery

3条答案

按热度按时间
6yt4nkrj

6yt4nkrj1#

霍普我没理解错你的问题我建议稍微修改一下html，日期使用writing-mode: vertical-lr; + transform: rotate(180deg);。
下面是你的代码可能看起来像：

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

个字符

赞(0）分享  回复(0）举报  2023-08-04
jaxagkaj

jaxagkaj2#

此外，使用top属性，可以将固定元素定位为看起来像是粘滞的。请记住相应地更新您的CSS。

$(window).on("scroll", function() {
  // Get all the 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 {
  // Otherwise, remove the sticky class.
  $(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;
}

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

.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 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>
赞(0）分享  回复(0）举报  2023-08-04
xkrw2x1b

xkrw2x1b3#

我已经对你提出的问题做了我的解释。这只是一些小的改动

$(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 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>
赞(0）分享  回复(0）举报  2023-08-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com