固定的标题块，在带有“ scrollOverflow：true”的fullPage.js节中滚动

Question

A fixed header on my website blocks scrolling, when hovering, through sections when set scrollOverflow: true .

When fixed header is not hovered scrolling through all sections works fine.

How can I achieve the same browsing through sections, when hovering fixed header?

Isolated Reproduction: https://jsfiddle.net/o5Lcpemw/1/

Steps to reproduce it:

1. Hover fixed red header
2. Try to scroll through blue, grey and green sections

MacOS High Sierra, latest Chrome Release

Answer 1

You could stop allowing the header to respond to mouse events by setting the element's pointer-events value to none:

#header {
  ...
  pointer-events: none;

}