[英]Changing text content on scroll position
I found a solution that didn't work mainly that I want. 我找到了一个主要无法解决的解决方案。 Here it is: 这里是:
and this solution works for me: 这个解决方案对我有用:
if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
{
$('#date').html($(this).find('.description').text());
return;
}
but I want to change content description in gray box more smooth. 但我想更平滑地更改灰色框中的内容描述。 I've tried to give animation in CSS for it, but it didn't work. 我尝试为此提供CSS动画,但没有用。
I modified your script a bit to detect when the text changes and when that happens I apply a small animation with jQuery. 我对脚本进行了一些修改,以检测文本何时发生更改,以及何时发生更改,我使用jQuery制作了一个小型动画。 I set the opacity to a low value, eg opacity:0.4
and then make a quick animation back to opacity:1
. 我将不透明度设置为较低的值,例如opacity:0.4
,然后将动画快速恢复为opacity:1
。
This will help your user to see easier the change in the text. 这将帮助您的用户更轻松地看到文本中的更改。
$(window).load(function () {
$(window).on('scroll resize', function () {
var pos = $('#date').offset();
$('.post').each(function () {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
var newDescr = $(this).find('.description').text();
var oldDescr = $('#date').html();
$('#date').html(newDescr);
if(newDescr !== oldDescr) {
$('#date').css('opacity', 0.4).animate({ 'opacity': '1',}, 200);
return;
}
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.