Fix Website Masthead and Make Relevant Settings to Adapt to this Change

Jul. 12, 2024

As shown in post title. Take Jekyll theme Minimal Mistakes as an example.

(1) Fix website masthead

..\_sass\minimal-mistakes\_masthead.scss:

1
2
3

.masthead {
  position: fixed;
  }

(2) Prevent website masthead from blocking webpage content

..\_includes\masthead.html:

1

<div style="height:74px"></div>

(3) Prevent website masthead from blocking <a> element whose href attribute begins with # (including section title link, footnote, and reverse footnote) when clicking the link to jump to it. It is realized by specifying an offset (77 in the following code) for those elements.

..\_layouts\single.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
      $('a[href^="#"][href!="#"]').click(function (e) {
        e.preventDefault();
        var hash = this.hash;
        var target = document.getElementById(hash.slice(1));
        if (!target) return;

        history.pushState(null, null, hash);

        var targetOffset = $(target).offset().top - 77; 
        $('html,body').animate({ scrollTop: targetOffset }, 5);
      });

      window.addEventListener('popstate', function (event) {
        if (location.hash) {
          var target = document.getElementById(location.hash.slice(1));
          if (target) {
            var targetOffset = $(target).offset().top - 77; 
            $('html,body').animate({ scrollTop: targetOffset }, 5);
          }
        }
      });
    });
    </script>
</head>