J'ai remarqué que de nombreuses applications de chat comme "Slack", "Discord" et "Skype" afficheront la date fixed et sticky en haut de la "page" selon la partie du contenu vers laquelle vous faites défiler actuellement (dans la vue). Je crée une application de chat et j'essaie d'accomplir la même chose.
Est-il possible de lui dire avec JS d'être position: sticky pour le dernier qui était en vue? Faire défiler vers le haut ou vers le bas?
J'ai créé un JS FIDDLE de la mise en page et l'a intégrée à cette question également.
Merci pour toute aide!
<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>
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; }
3 Réponses :
Est-ce que c'est?
J'ai ajouté position: sticky et top:0
position: sticky utilisable avec seulement des propriétés supérieures ou inférieures. ( haut ou bas pour le défilement vertical, gauche ou droite pour le défilement horizontal)
<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>
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;
}
Hahah OUI! Exactement! Tu es la légende mon ami.
Veuillez prendre le temps de décrire quels sont les problèmes et pourquoi cette solution est utile. N'oubliez pas que nous sommes là pour éduquer les gens, pas seulement pour leur envoyer du code.
Très élégant. J'ai perdu mon temps avec jQuery et offset (). Top
Sachez simplement que la prise en charge de 'sticky' est encore assez médiocre: caniuse.com/#feat=css-sticky Si vous avez besoin d'une meilleure assistance, "fixe" peut être une meilleure option. Sinon, si vous recherchez `` css sticky header '' sur Google, il existe également de nombreux exemples.
Utilisez la position fixe et donnez l'espacement à partir du coin supérieur droit que vous voulez et cela fonctionnera bien.
Vous pourriez également avoir besoin de Z-index pour vous assurer que d'autres éléments ne seront pas devant votre élément fixe.
Vous trouverez plus d'informations sur le positionnement ici
Voici un extrait de ce code pour réaliser ce que vous faites: https://codepen.io / chrissp26 / pen / gBrdo
<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>
.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;
}
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"));
});
Pas tout à fait sûr, qu'est-ce que vous demandez, voulez-vous simplement afficher la date / heure à un endroit fixe indépendamment du défilement? Je peux voir plusieurs éléments de date, lequel souhaitez-vous afficher?
Connaissez-vous le relâchement ou la discorde? Il affiche la date en haut de chaque section et crée une nouvelle date pour chaque section. J'ai ce travail. Mais ils affichent également les données actuelles "Fixé en haut de l'écran" pour quelle partie du "chat" vous regardez. Toutes les applications de chat sont comme ça, y compris les messages texte de votre téléphone.
Par section, j'entends qu'il crée une nouvelle date pour chaque jour et affiche les nouveaux messages de discussion sous cette date. Et si ces messages de chat sont visibles, il définit la date en haut "fixe"
alors, ayez 1 date en haut et changez-la en fonction de la section visible?
Correct - Mais comme dans mon exemple de code - les dates restent là où elles sont .. mais devraient être fixées en haut de la page lorsque cette section de dates est visible.
J'ai une solution en tête, mais avant de continuer, est-ce que ça irait si j'enveloppais chaque section par un élément div ou ul?
C'est un plugin existant que je modifie. Voici ma structure actuelle: i.postimg.cc/fRP33cs4/strc.png
Laissez-moi vérifier les fichiers du plugin pour voir si changer cette structure serait quelque chose que je peux gérer. Un moment
i.postimg.cc/63Pwc0Hw/injectedjs.png - son auto-injecté - mais je Je pense avoir ma réponse ci-dessous. Merci!