#javascript #html #css
#javascript #HTML #css
Вопрос:
Я фиксирую положение контейнера stickyDiv
в нижней части окна просмотра, как только пользователь прокручивает верхнюю часть stickInDiv
, до тех пор, пока его исходное положение (которое я вычисляю из верхней части документа) не будет впервые показано в нижней части окна просмотра. После этого контейнер должен оставаться в исходном положении. При прокрутке вверх он должен снова зафиксироваться в нижней части окна просмотра, как только его исходное положение достигнет нижней части окна просмотра.
Текущее поведение: stickyDiv
не остается в исходном положении, как только его исходное положение достигнуто в нижней части окна просмотра.
window.onscroll = function() {
scrollFunction();
};
function getTop(elem) {
const box = elem.getBoundingClientRect();
const body = document.body;
const docEl = document.documentElement;
const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
const clientTop = docEl.clientTop || body.clientTop || 0;
const top = box.top scrollTop - clientTop;
return Math.round(top)
}
const stickyDiv = document.getElementById('stickyDiv');
const stickyElemTopFromDocumentTop = getTop(stickyDiv);
const Height = stickyDiv.clientHeight; /* height of the sticky element */
const stickInDiv = document.getElementById('stickInDiv');
const stickInDivOffsetTop = stickInDiv.offsetTop;
function scrollFunction() {
if (window.pageYOffset > stickyElemTopFromDocumentTop) {
stickyDiv.classList.remove('sticky');
} else if (window.pageYOffset > stickInDivOffsetTop) {
stickyDiv.classList.add('sticky');
} else {
stickyDiv.classList.remove('sticky');
}
}
#contentAtTop {
height: 100px;
background-color: blue;
opacity: 0.2;
color: white;
}
#contentBeforeStickyDiv {
height: 1200px;
background-color: green;
color: white;
opacity: 0.8;
}
#stickyDiv {
color: white;
background-color: grey;
height: 40px;
}
#contentAfterStickyDiv {
height: 400px;
background-color: purple;
color: white;
opacity: 0.8;
}
.sticky {
position: fixed;
bottom: 0;
width: 100%;
}
<body>
<div id="contentAtTop">Content At Top</div>
<div id="stickInDiv">
<div id="contentBeforeStickyDiv">Content Before Sticky Div</div>
<div id="stickyDiv">Sticky Container</div>
<div id="contentAfterStickyDiv">Content After Sticky Div</div>
</div>
</body>