[英]How to trigger the layout to change?
我有一个sticked
元件,它得到的top
从当前-alignment scroll
偏移处。 问题是,如果布局中的空间可用,则该布局不会“重新触发” 。 因此,在粘贴元素所在的位置留下了一个幽灵间隙。
http://fiddle.jshell.net/pPc4V/
标记非常简单:
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#" class="sticked"></a>
<a href="#"></a>
...
以及js:
var $win = $(this);
var sticked = document.querySelector('a.sticked');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
sticked.style.top = scrollTop + 'px';
// $win.resize();
});
...到目前为止,CSS看起来不错:
a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.sticked {
position: relative;
top: 0;
left: 0;
background: tomato;
}
我试图触发滚动resize
事件(如您在上面未注释的内容所示),但是没有成功! 有什么想法,如何重新触发布局,以使下一个浮动元素填充自由间隙?
为了阐明我的意思,我做了一个简单的图像时间限制:
第1步
第2步
第三步
问题是您要设置位置固定在内联显示的元素上。 这将导致发生该空间。 我已使用正确的对齐方式重命名了您的jsFiddle。
为了解决这个问题,我仅在文档的scrollTop位置大于目标元素的scrollTop位置时添加了“阻塞”类。
jsFiddle : http : //fiddle.jshell.net/pPc4V/44/
HMTL:
<div id="grid">
<a href="#"></a>
<a href="#"></a>
etc...
</div>
CSS:
#grid {
height:1000px;
overflow:hidden;
float:left
}
#grid > a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.stuck {
position: fixed;
background: navy !important;
}
JS:
$(window).on('scroll', function () {
var $doc = $(document),
parentElement = $('#grid'),
childToGetStuck = parentElement.find('a:nth-child(5)');
if ($doc.scrollTop() > childToGetStuck.scrollTop()) {
childToGetStuck.addClass('stuck');
//console.log($('.stuck').scrollTop())
} else {
childToGetStuck.removeClass('stuck');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.