我試著將旁白標記的內容固定在& ltdiv & gt它在里面但是即使我寫了位置:粘;top:0;它不起作用。
{% extends 'main/base.html' %}
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"/>
<div class="row mt-5 border-top border-dark pt-5">
<aside class="col-sm-4 sticky-aside" id="sticky-aside">
Aside content I want to pin to the top as the user scrolls
</aside>
<section class="col-sm-8">
<article class="row mb-3">
A few articles here
</article>
</section>
</div>
{% endblock %}
@media only screen and (max-width: 460px) {
.username {
font-size: 17px;
}
#desc {
font-size: 13px;
}
}
@media only screen and (min-width: 1000px) {
.card-container {
display: flex;
flex-wrap: wrap;
}
}
.body {
font-family: 'PT Serif', serif;
}
.rounded-circle {
width: 33px;
}
.trending {
font-family: 'Merriweather', serif !important;
color: rgba(94, 94, 94, 0.275);
}
.border-bottom-dark{
border-bottom: 1px solid rgba(41,41,41,1);
}
.aside-buttons>li{
margin-bottom: 10px;
}
#sticky-aside {
position: sticky;
top: 0;
}
.sticky {
position: fixed;
top: 0;
}
window.addEventListener('scroll', function() {
var stickyAside = document.getElementById('sticky-aside');
var section = stickyAside.closest('section');
var sectionTop = section.offsetTop;
var sectionBottom = sectionTop + section.offsetHeight;
var asideHeight = stickyAside.offsetHeight;
if (window.pageYOffset > sectionTop && window.pageYOffset < sectionBottom - asideHeight) {
stickyAside.classList.add('sticky');
} else {
stickyAside.classList.remove('sticky');
}
});
當我移除部分標簽時,它工作得很好,但是看起來很糟糕,但是為什么部分標簽會破壞它呢?CSS類是引導程序,你可以在這里看到完整的代碼。
我試著修改JavaScript,只放入position: sticky,但是沒有任何效果,除非我刪除section標簽。
您可以檢查一些內容來解決此問題。
首先,確保您的div有一個sticky位置。您可以通過將以下CSS添加到您的div中來實現這一點:
position: sticky;
接下來,確保您的div位于位置為relative的父元素中。您可以通過將以下CSS添加到div的父元素中來實現這一點:
position: relative;
如果您已經做了這兩件事,但是您的div仍然沒有鎖定,那么可能是頁面上的另一個元素阻塞了它。您可以使用瀏覽器中的檢查器工具來查找與您的div重疊的任何元素。如果您找到了,您可以嘗試移動它們或改變它們的大小,以確保它們沒有阻塞您的div。
如果您已經檢查了所有這些東西,而您的div仍然沒有鎖定,那么您的瀏覽器中可能有一個bug。您可以嘗試將您的瀏覽器更新到最新版本,或者切換到另一個瀏覽器,看看是否可以解決問題。
希望這有所幫助!