Question

我注意到许多聊天应用程序（例如“ Slack”，“ Discord”和“ Skype”）都会在内容的哪一部分显示日期fixed和sticky到“页面”的顶部您当前正在滚动到（视图中）。我正在设计一个聊天应用程序，并试图实现相同的目的。

有可能用JS告诉它最后一个浏览器是position:sticky吗？向上还是向下滚动？

我创建了布局的 JS FIDDLE ，并将其也嵌入了这个问题。

感谢您的帮助！

body {margin:0; background:lightgray;}
ul, li {
  list-style-type: none;
  padding:0px;
  margin:0px;
}
.user {font-weight:bold; padding-right: 5px;}
.msg{
 display:flex;
 background:white;
 margin: 20px;
 margin-left:5px;
 padding: 20px;
 border-radius: 10px;
}
.date {width:100%; background: tomato; text-align:center; padding: 15px; color:white; font-weight:bold; }

<ul>


<li class="date">Date: 1/21/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/22/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/23/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/24/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/25/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

</ul>

Answer 1

这是吗？

我添加了position:sticky和top:0

position:sticky仅可用于top或bottom属性。（{top或bottom用于垂直滚动，left或right用于水平滚动）

body {margin:0; background:lightgray;}
ul, li {
  list-style-type: none;
  padding:0px;
  margin:0px;
}
.user {font-weight:bold; padding-right: 5px;}
.msg{
 display:flex;
 background:white;
 margin: 20px;
 margin-left:5px;
 padding: 20px;
 border-radius: 10px;
}
.date {width:100%; background: tomato; text-align:center; padding: 15px; color:white; font-weight:bold;
position:sticky;
top:0;
}

<ul>


<li class="date">Date: 1/21/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/22/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/23/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/24/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/25/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

</ul>

Answer 2

使用固定的位置，并从所需的右上角开始提供间距，它将正常工作。

您可能还需要Z-index来确保其他元素不在固定元素的前面。

有关定位的更多信息，请参见here

Answer 3

以下是该代码的片段，以实现您的工作：https://codepen.io/chrissp26/pen/gBrdo

var stickyHeaders = (function() {

  var $window = $(window),
    $stickies;

  var load = function(stickies) {

    if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {

      $stickies = stickies.each(function() {

        var $thisSticky = $(this).wrap('<div class="followWrap" />');

        $thisSticky
          .data('originalPosition', $thisSticky.offset().top)
          .data('originalHeight', $thisSticky.outerHeight())
          .parent()
          .height($thisSticky.outerHeight());
      });

      $window.off("scroll.stickies").on("scroll.stickies", function() {
        _whenScrolling();
      });
    }
  };

  var _whenScrolling = function() {

    $stickies.each(function(i) {

      var $thisSticky = $(this),
        $stickyPosition = $thisSticky.data('originalPosition');

      if ($stickyPosition <= $window.scrollTop()) {

        var $nextSticky = $stickies.eq(i + 1),
          $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');

        $thisSticky.addClass("fixed");

        if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {

          $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
        }

      } else {

        var $prevSticky = $stickies.eq(i - 1);

        $thisSticky.removeClass("fixed");

        if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {

          $prevSticky.removeClass("absolute").removeAttr("style");
        }
      }
    });
  };

  return {
    load: load
  };
})();

$(function() {
  stickyHeaders.load($(".date"));
});

.date {
  width: 100%;
  background: tomato;
  text-align: center;
  padding: 15px;
  color: white;
  font-weight: bold;
}

.date.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 0;
}

.date.fixed.absolute {
  position: absolute;
}

body {
  margin: 0;
  background: lightgray;
}

ul,
li {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.user {
  font-weight: bold;
  padding-right: 5px;
}

.msg {
  display: flex;
  background: white;
  margin: 20px;
  margin-left: 5px;
  padding: 20px;
  border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>


  <div class="date">
    Date: 1/21/2019
  </div>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <div class="date">
    Date: 1/22/2019
  </div>
  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>
  <div class="date">
    Date: 1/23/2019
  </div>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <div class="date">
    Date: 1/24/2019
  </div>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <div class="date">
    Date: 1/25/2019
  </div>>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

  <li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

</ul>

使当前日期停留在页面顶部

3 个答案: