1

I've implemented a fixed header in the Divi theme on WordPress and given the content padding to move it out from under the header. To compensate for the fixed header overlapping in-page anchors I've added fake anchor points offset a certain number of pixels above the actual anchor text. (I tried the :before element solution, scroll-padding-top, and a few other fixes but they didn't work in Divi). So far so good.

The problem is that when a screen reader (for example, JAWS) reads the screen, it scrolls down the page. For people who are partially sighted (as opposed to blind), it's important that what's being read matches up with what's on the screen. However, what is read out by JAWS on my site is often obscured by the fixed header.

Has anyone found a solution to this?

Here's my (simplified) code...

.content {
    padding-top: 100px;
}
.fake_anchor_section {
    margin: -100px 0 100px;
}

<div class="content">
    <a href="#example">Jump to example</a>
    ....
    <div id="example" class="fake_anchor_section"></div>
    <div>Real anchor section contents</div>
<div>
Yasin Br
  • 1,675
  • 1
  • 6
  • 16
clayRay
  • 683
  • 1
  • 14
  • 32
  • 1
    Did you consider not fixing the header? Don’t forget, content is king, often fixed headers sacrifice screen real estate for oldschool branding. It’s rarely in the users’ interest. A header that appears when scrolling back up or hovering the mouse near the top might be a compromise. – Andy May 17 '22 at 12:30
  • 1
    Instead of using fixed positioning, you could remove scroll from the root element `html,body { overflow-y: hidden; }` and give it to a container that takes all the remaining space after the header `.main { overflow-y: scroll; }`. Might that be a solution for you? An advantage would also be that a growing header due to increased font-sizes would be taken into account. – Andy May 17 '22 at 16:18
  • Thanks for your responses @Andy. The scrolling back up header is a great idea. I'll discuss it with the client. In terms of your second suggestion, I tried it on the live site and in this [CodePen](https://codepen.io/clayrav/pen/mdXWqNa), and unfortunately it doesn't seem to work. The scroll track appears, but no scroll bar. Perhaps the `html` element is needed to calculate the viewport height? I've had issues with overflow-y and overflow-x not working as expected before. – clayRay May 17 '22 at 20:15

1 Answers1

1

Here is another solution to a fixed header, which simply applies scroll only to the main content part of the site.

It might need some details fixed in terms of viewport heights etc., it’s intended to demonstrate the basic idea of removing scroll from root and applying it to another element.

:root {
  overflow-y: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 1em;
}

.content {
  padding: 1em;
  height: calc(100% - 2em);
  overflow-y: auto;
}
<header class="header">Header</header>
<main class="content">
  <p>Phasellus accumsan cursus velit. Proin magna. Aliquam erat volutpat. Fusce vulputate eleifend sapien. Etiam sit amet orci eget eros faucibus tincidunt.</p>
  <p>Phasellus dolor. Fusce ac felis sit amet ligula pharetra condimentum. Phasellus accumsan cursus velit. Praesent adipiscing. Pellentesque posuere.</p>
  <p>In auctor lobortis lacus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Fusce convallis metus id felis luctus adipiscing. Nam eget dui. Proin faucibus arcu quis ante.</p>
  <p>Ut varius tincidunt libero. Sed libero. Nullam accumsan lorem in dui. Praesent ut ligula non mi varius sagittis. Ut a nisl id ante tempus hendrerit.</p>
  <p>Praesent vestibulum dapibus nibh. Morbi nec metus. Praesent venenatis metus at tortor pulvinar varius. Praesent blandit laoreet nibh. Sed aliquam ultrices mauris.</p>
  <p>Phasellus accumsan cursus velit. Proin magna. Aliquam erat volutpat. Fusce vulputate eleifend sapien. Etiam sit amet orci eget eros faucibus tincidunt.</p>
  <p>Phasellus dolor. Fusce ac felis sit amet ligula pharetra condimentum. Phasellus accumsan cursus velit. Praesent adipiscing. Pellentesque posuere.</p>
  <p>In auctor lobortis lacus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Fusce convallis metus id felis luctus adipiscing. Nam eget dui. Proin faucibus arcu quis ante.</p>
  <p>Ut varius tincidunt libero. Sed libero. Nullam accumsan lorem in dui. Praesent ut ligula non mi varius sagittis. Ut a nisl id ante tempus hendrerit.</p>
  <p>Praesent vestibulum dapibus nibh. Morbi nec metus. Praesent venenatis metus at tortor pulvinar varius. Praesent blandit laoreet nibh. Sed aliquam ultrices mauris.</p>
  <p>Phasellus accumsan cursus velit. Proin magna. Aliquam erat volutpat. Fusce vulputate eleifend sapien. Etiam sit amet orci eget eros faucibus tincidunt.</p>
  <p>Phasellus dolor. Fusce ac felis sit amet ligula pharetra condimentum. Phasellus accumsan cursus velit. Praesent adipiscing. Pellentesque posuere.</p>
  <p>In auctor lobortis lacus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Fusce convallis metus id felis luctus adipiscing. Nam eget dui. Proin faucibus arcu quis ante.</p>
  <p>Ut varius tincidunt libero. Sed libero. Nullam accumsan lorem in dui. Praesent ut ligula non mi varius sagittis. Ut a nisl id ante tempus hendrerit.</p>
  <p>Praesent vestibulum dapibus nibh. Morbi nec metus. Praesent venenatis metus at tortor pulvinar varius. Praesent blandit laoreet nibh. Sed aliquam ultrices mauris.</p>
</main>
Andy
  • 4,783
  • 2
  • 26
  • 51