I am trying to make a webpage with a sticky/fixed header. The header should have a yellow background, and the font color of the body, as well as the header, should have black color.
The body contains different mathematical equations. The problem is if I scroll down, any normal text (written in English) disappears when it passes through the sticky header portion, i.e., the sticky header can detect and make it disappear. But that doesn’t happen in the same case for mathematical equations; even If I rotate plain English words, the sticky header can NOT absorb it to make it disappear.
I am looking for a perfect remedy, if possible.
Note that we can bypass this obstruction by changing the color of the sticky header, but this is not the solution I want.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
padding: 10px 16px;
background: yellow;
color: black;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
</style>
</head>
<body>
<div class="header" id="myHeader">
<h2>Integration</h2>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> $$\int_0^1f(x) \mathrm dx$$
<br/><br/><p style="transform:rotate(270deg); top: -250px; position: relative;"> INTEGRATION</p>
<br/> <br/>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>$$\int_0^1f(x) \mathrm dx$$
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>$$\int_0^1f(x) \mathrm dx$$
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>$$\int_0^1f(x) \mathrm dx$$
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> $$\int_0^1f(x) \mathrm dx$$
<p> Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>$$\int_0^1f(x) \mathrm dx$$
<p> Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>$$\int_0^1f(x) \mathrm dx$$
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
inlineMath: [['$','$']]
}
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
</body>
</html>I learned most part of this code from https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro
>Solution :
The z-index property allows you to control the position of elements on the z-axis (aka "before", "behind").
Therefore, whenever you use fixed, absolute or sticky positioning, you usually also want to add a z-index higher then the default, so that the positioned element is in front of all other content.
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1; /* <-- add this to your css */
}