4
我試圖修復位置元素，並採取父div的全寬。這是我的html：設置父div的定位固定元素寬度不起作用
<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是小提琴。請確保在屏幕上展開它，以便它足夠寬，以便看到它工作。
通過使一個元素絕對的，靜止的或固定的，你把它拿出來的頁面的流量，所以它不再被認爲是它裏面的容器，不能被它的限制。 – FluffyKitten
有沒有解決這個問題，而不使用js？ – Leff
很難說沒有更多的上下文或看到包含它的代碼。例如，最左邊的列是？在這種情況下，可能會將其永久固定到左側，並在主內容中添加填充以抵消該內容。但就像我說的，沒有更多的信息，它很難知道。 – FluffyKitten