从静态定位切换到固定定位时宽度发生变化

Question

滚动时，我将卡从position:static;更改为position:fixed;。当它变为position:fixed;时，宽度变得非常大，而不是保持不变。

我尝试了各种解决方案，包括这里几乎重复的帖子中列出的所有解决方案：当应用position:fixed时，是否可以保持父元素的宽度？

只是想知道我在这里是不是很傻。如有任何帮助，我们将不胜感激。

var elementPosition = $('#navigation').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#navigation').css('position', 'fixed').css('top', '0');
} else {
$('#navigation').css('position', 'static');
}
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid mt-4">
<div class="row">
<div class="col-3">
<div class="card" id="navigation">
<div class="card-body">
<h3>txgrgrgr</h3>
<p>Hello and welcome to the online booking page forthghfg.</p>
<hr>
<h4 class="mt-4">Contact</h4>
<p><a href="">thghshg.co.uk</a></p>
<p><a href="">0123464</a></p>
<hr>
<h4 class="mt-4">Address</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
<hr>
<h4 class="mt-4">Opening Times</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
</div>
</div>
</div>
<div class="col-9" style="margin-bottom:1000px;">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
<div class="row">
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>

Answer 1

我添加了位置：在这两种情况下都是粘性的。无论是否滚动。请检查下面的片段是否正常工作。

var elementPosition = $('#navigation').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#navigation').css('position', 'sticky').css('top', '0');
} else {
$('#navigation').css('position', 'sticky');
}
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid mt-4">
<div class="row">
<div class="col-3">
<div class="card" id="navigation">
<div class="card-body">
<h3>txgrgrgr</h3>
<p>Hello and welcome to the online booking page forthghfg.</p>
<hr>
<h4 class="mt-4">Contact</h4>
<p><a href="">thghshg.co.uk</a></p>
<p><a href="">0123464</a></p>
<hr>
<h4 class="mt-4">Address</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
<hr>
<h4 class="mt-4">Opening Times</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
</div>
</div>
</div>
<div class="col-9" style="margin-bottom:1000px;">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
<div class="row">
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>