我是JS和Bootstrap的初学者。我在我的项目Bootstrap 4和jQuery中使用了
。我有此代码：
<body>
<section id="planner">
<div class="nav">
<a href="#" class="active">Konfiguracja planu</a>
<a href="#">Posiłki</a>
<a href="#">Raporty</a>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>About</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="col-sm-6">
<h2 class="cow">qwerty</h2>
<div class="tableBox">
<br/><br/><br/><br/><br/><br/>
<div id="stick-here"></div>
<div id="stickThis">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
data-target="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P"
crossorigin="anonymous"></script>
<script>
function sticktothetop() {
var window_top = $(window).scrollTop();
var top = $('#stick-here').offset().top;
if (window_top > top) {
$('#stickThis').addClass('stick');
$('#stick-here').height($('#stickThis').outerHeight());
} else {
$('#stickThis').removeClass('stick');
$('#stick-here').height(0);
}
}
$(function () {
$(window).scroll(sticktothetop);
sticktothetop();
});
</script>
</body>
</html>
预览：http://serwer1356363.home.pl/pub/_demo/
当我向下移动屏幕时-在右侧，组件手风琴“粘在”屏幕顶部。 这是对的。问题在于此手风琴是从它的列中出来的（它太宽了）。如何解决？
答案 0 :(得分：0)
您可以更改以下CSS规则：
#stickThis.stick {
position: sticky; /* instead of fixed*/
}
答案 1 :(得分：0)
您可以在添加粘性类的同时使用javascript根据其父级宽度将宽度设置为#stickThis。
例如：
$parentWidth = $('#stickThis').closest('.tableBox').innerWidth();
$('#stickThis').width($parentWidth);
完整代码：
function sticktothetop() {
var window_top = $(window).scrollTop();
var top = $('#stick-here').offset().top;
if (window_top > top) {
$('#stickThis').addClass('stick');
setWidth();
$('#stick-here').height($('#stickThis').outerHeight());
} else {
$('#stickThis').width('auto');
$('#stickThis').removeClass('stick');
$('#stick-here').height(0);
}
}
$(function() {
$(window).scroll(sticktothetop);
sticktothetop();
});
function setWidth() {
if ($('#stickThis').hasClass('stick')) {
$parentWidth = $('#stickThis').closest('.tableBox').innerWidth();
$('#stickThis').width($parentWidth);
}
}
$(window).resize(function() {
setWidth();
});
此外，您还应该在调整窗口大小时调用setWidth函数，以固定元素的宽度。