4
私はposition要素を固定しようとしており、親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