With appendTo: 'body', the menu is not shown in scrolled window

[kasbert]

Changing position to "absolute" helped for me

  if (!this.hasSameParent) {
      // We cannot rely on the element position, need to position relative to the window
      //element.css("position", "fixed");
      element.css("position", "absolute");
      var offset = this.$element.offset();
      pos.top =  offset.top;
      pos.left = offset.left;
  }

[sp00n]

2 years later... Or use getBoundingClientRect().

I noticed something similar for one of my projects. The search box is within a header element that has a position: fixed; value itself. I had to append it to the body, or otherwise the content would be cut off due to a overflow: hidden. But since jQuery's .offset() and .position() calls return incorrect values for position: fixed elements when the page is scrolled, position: absolute wouldn't have helped here either, as it would scroll out of view again if you scroll the window. Instead, use the native getBoundingClientRect() call to get the correct position.

if (!this.hasSameParent) {
    // We cannot rely on the element position, need to position relative to the window
    element.css('position', 'fixed');

    // If we're using position: fixed, we cannot rely on jQuery's .offset() or .position()
    // Use the native .getBoundingClientRect() function instead
    var position = this.$element.get(0).getBoundingClientRect();
    pos.top = position.top;
    pos.left = position.left;
}

Browser support is good, too: https://caniuse.com/#feat=getboundingclientrect

[doubleaxe]

This can be fixed without modifying this project sources, just using client options. The workaround is not really nice, but it works.

var widgetOptions = {
		appendTo: $('body'),
		scrollHeight: function() {
			//fix for scrolling
			return -Math.max($("html").scrollTop(), $("body").scrollTop());
		}
};
$(element).attr('autocomplete', 'off').typeahead(widgetOptions);