【发布时间】：2018-03-04 22:14:28
【问题描述】：
我正在尝试修复位置元素，并获取父 div 的完整宽度。这是我的html：
<div class="col-md-3">
<div class="player-avatar-card">
<div class="card-body">
<div class="avatar-image">
<img src="/imagecache/small/{{ $player->image_filename }}" alt="Profile Image" class="rounded-circle">
<img class="flag rounded-circle" src="/icons/flags-round/{{ $player->nationality }}.svg"></h3>
</div>
<h5>{{ $player->first_name }} {{ $player->last_name }}</h5>
<p>{{ $player->nationality }}, {{ $player->age }} years</p>
<div class="social-buttons">
<div class="col-12">
<a class="btn btn-info btn-lg" href="#" role="button">
<i class="ion-plus-round"></i> follow</a>
</div>
<div class="col-12">
<a class="btn btn-info btn-outline-info" href="#" role="button">
<i class="ion-android-share-alt"></i> share</a>
</div>
</div>
</div>
</div>
</div>
在滚动到元素时，我将定位类提供给player-avatar-card：
const avatarCard = document.querySelector('.player-avatar-card');
const fixClassAvatar = 'is-fixed-avatar';
function stickyScroll() {
if( window.pageYOffset > 56 ) {
avatarCard.classList.add(fixClassAvatar);
}
if( window.pageYOffset < 56 ) {
avatarCard.classList.remove(fixClassAvatar);
}
}
$(window).scroll(stickyScroll);
这是类：
.is-fixed-avatar {
position: fixed;
max-width: inherit;
width: 100%;
}
但是，该元素超出了col-md-3 div，我该如何解决？
Here 是小提琴。确保在屏幕上展开它，使其足够宽，可以看到它工作。
【问题讨论】：
-
通过使一个元素成为绝对的、静态的或固定的，你将它从页面的流程中移除，因此它不再被认为是在它的容器内并且不能被它限制。
-
不使用 js 有没有办法解决这个问题？
-
如果没有更多上下文或查看包含它的代码，很难判断。例如是最左边的列吗？在这种情况下，可以将其永久固定在左侧，并在主要内容中添加填充以抵消它。但就像我说的，没有更多信息，很难知道。
-
是的，它是最左边的一列，我会试着把它弄出来，这样你就可以得到全貌。
-
我在这里做了一个小提琴：jsfiddle.net/p9229sak
标签： jquery css twitter-bootstrap bootstrap-4 css-position