My website has an image where users can click on elements to scroll down to text. However, I'm facing a problem because there is a sticky menu at the top of my website. How can I ensure that the scrolling works correctly with the sticky menu included?
An example HTML code (without the sticky menu) looks like this:
<!DOCTYPE html>
<html>
<body>
<style>
html{scroll-behavior:smooth}
</style>
<div style="width:100%;">
<img id="img_ID" src="https://i.ibb.co/M6pJRry/kalendarium-22.png" usemap="#map" border="0" width="100%" alt="" />
</div>
<map id="map_ID" name="map">
<area shape="rect" coords="81,79,171,117" href="#1954" />
...
...
<p id ="2018">
<strong>Powstanie polskiej marki NARUM.</strong>Michał Toczyłowski, prawnik i przedsiębiorca, szukając ratunku, dla jednego ze swoich synów, u którego zdiagnozowano zwiotczenie mięśni (skutek pewnych działań medycznych), trafia w rosyjskiej literaturze medycznej, na wzmiankę o niezwykłej bakterii Narine. Po wielomiesięcznych poszukiwaniach udaje mu się w końcu nawiązać kontakt z producentem w Armenii. Po doświadczeniu na sobie i najbliższych, niezwykłego działania probiotyku, postanawia sprowadzić te produkty na rodzimy rynek. Tworzy markę Narum i rozpoczyna współpracę z producentem z Armenii.
</p>
<br>
...
<script type="text/javascript">
window.onload = function () {
var ImageMap = function (map, img) {
var n,
areas = map.getElementsByTagName('area'),
len = areas.length,
coords = [],
previousWidth = 1900;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split(',');
}
this.resize = function () {
var n, m, clen,
x = img.offsetWidth / previousWidth;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m++) {
coords[n][m] *= x;
}
areas[n].coords = coords[n].join(',');
}
previousWidth = document.body.clientWidth;
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
imageMap.resize();
return;
}
</script>
</body>
</html>
The scrolling functionality works perfectly without the sticky menu. If you would like to see how it behaves with the sticky menu included, you can visit my website here.