Ich habe versucht, Header in meiner HTML-Seite mit CSS-Eigenschaft position: fixed zu beheben. Ich möchte die CSS-Eigenschaft position:fixed nicht verwenden. Ist es nun möglich, den Header in meiner HTML-Seite mit JavaScript zu fixieren, ohne nur die CSS-Property-Position zu fixieren? Es wurde mir kürzlich in einem Interview gefragt.Header behoben mit JavaScript
Sie können die scrollTop Eigenschaft und die scroll event und position:absolute verwenden.
Hier ist ein ein Beispiel:
<html>
<body>
<div style="position: absolute; border: 1px solid red; background-color: white;" id="f">fixed</div>
<div style="height:800px; background-color: #c0c0c0;"></div>
<div style="height:800px; background-color: #f0f0f0;"></div>
</div>
<script>
window.addEventListener("scroll", function() {
e = document.getElementById('f');
e.style.top = document.body.scrollTop + 1;
});
</script>
</body>
</html>
Sie können Kopfelementposition auf Scroll einstellen, aber Sie werden eine große Auswirkung auf die Leistung haben im Vergleich zu CSS-Position fixiert. – Mirceac21