Adds option to specify an header height

[leorossi]

When using a template that has a sticky-header, clicking on the sidebar will
scroll the page under the header.

I added the option headerHeight (default = 0) so that the content div will
be scrolled down that amount of pixels.

Summary

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

Before

After

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

---

• DO NOT include files inside lib directory.

[anikethsaha]

• can you try getting the header height dynamically? using offsetHeight may be ! and keeping that as a default instead of 0

• the name headerHeight seems like controlling the height of the header but this PR is trying to position the page right ? so I guess we need some better name maybe like offsetHeader ? WDYT ?

• You need to update the docs as well.

[leorossi]

can you try getting the header height dynamically? using offsetHeight may be ! and keeping that as a default instead of 0

It's hard to have a one-size-fits-all solution for this. We don't know what is the selector of the header, of which calculate the height. Maybe we can specify the selector and calculate height dinamically?

offsetHeader seems a better name

Docs will be updated accordingly since this PR seems interesting.

[anikethsaha]

By default the navbar will be at nav.app-nav so you can take the height of this and replace it with 0
? WDYT ?
But this will break if users writes their own navbar.
By header, I meant navbar height ! sorry I mis-wrote that.

Maybe we can specify the selector and calculate height dinamically

offset with navbar's height !

Docs will be updated accordingly since this PR seems interesting.

It would be better if you can add the docs in this PR itself. it help to others who refers the changelog and PR accrodingly.
Thanks

[leorossi]

Well I am trying to fix the error when a header with position: fixed is present in layout, like this stub

<div id="navbar" style="position:fixed; top:0; height:90px;">
...
</div>
<div id="app"></div>
<script>
      window.$docsify = {
        name: 'Foobar',
        logo: 'img/foobar.svg',
        repo: 'https://github.com/foo/bar',
        loadSidebar: '_sidebar',
      }
</script>

It would be better if you can add the docs in this PR itself. it help to others who refers the changelog and PR accrodingly.

that is what I meant, sorry :)

[anikethsaha]

Go ahead ! this seems like a nice enhancement. Just let me know when this is ready for fresh review

[anikethsaha]

I will test it locally soon !
looks good though

[jploch]

I was having the same issue and could not find the updated documentation.
The option now seems to have changed to "topMargin".

So this will work:
window.$docsify = { el: '#app', topMargin: 90, }