Floating menu with the top offset

1

I use the prosemirror-menu module and I have a fixed navigation on top of my website. When I scroll down my menuBar sticks to the top of the window but underneath navbar so it’s not visible. Is there a possibility to add the top offset to the floating menuBar?

I see that this bit of code is responsible for it and it’s just the matter of changing the “breakpoint” in if statements and adding this.menu.style.top = offset:

MenuBarEditorView.prototype.updateFloat = function updateFloat () {
  var parent = this.wrapper, editorRect = parent.getBoundingClientRect()
  if (this.floating) {
    if (editorRect.top >= 0 || editorRect.bottom < this.menu.offsetHeight + 10) {
      this.floating = false
      this.menu.style.position = this.menu.style.left = this.menu.style.top = this.menu.style.width = ""
      this.menu.style.display = ""
      this.spacer.parentNode.removeChild(this.spacer)
      this.spacer = null
    } else {
      var border = (parent.offsetWidth - parent.clientWidth) / 2
      this.menu.style.left = (editorRect.left + border) + "px"
      this.menu.style.display = (editorRect.top > window.innerHeight ? "none" : "")
    }
  } else {
    if (editorRect.top < 0 && editorRect.bottom >= this.menu.offsetHeight + 10) {
      this.floating = true
      var menuRect = this.menu.getBoundingClientRect()
      this.menu.style.left = menuRect.left + "px"
      this.menu.style.width = menuRect.width + "px"
      this.menu.style.position = "fixed"
      this.spacer = crel("div", {class: prefix + "-spacer", style: ("height: " + (menuRect.height) + "px")})
      parent.insertBefore(this.spacer, this.menu)
    }
  }
};
exports.MenuBarEditorView = MenuBarEditorView

What is the best way of handling it?

2

I’d accept a pull request that makes the top offset an option passed to the plugin.

3

I’d like to do this as I need the fixed menubar. question: what is the purpose of the scrollAncestor param to MenuBarView.prototype.updateFloat()?

4

It seems to be there to align the bar with the top of the scrolling element when scrolling something that’s not the top-level page. It doesn’t appear to work very well though. I’ll open an issue (#18).