Сделать текущую дату прикрепленной к началу страницы - PullRequest
Новая
       3

Сделать текущую дату прикрепленной к началу страницы

0 голосов
/ 25 января 2019

Я заметил, что многие приложения чата, такие как "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>

Ответы [ 3 ]

0 голосов
/ 25 января 2019

Используйте фиксированное положение и задайте расстояние от нужного верхнего правого края, и оно будет работать нормально.

Вам также может понадобиться Z-index, чтобы другие элементы не находились перед вашим неподвижным элементом.,

Более подробную информацию о позиционировании можно найти здесь

0 голосов
/ 25 января 2019

Вот фрагмент этого кода для достижения того, что вы делаете: 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>
0 голосов
/ 25 января 2019

Это?

Я добавил position:sticky и top:0

position:sticky можно использовать только с верхними или нижними свойствами. (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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...