I’ll try - still trying to figure it out as my time for this permits…
All this is inspected on mobile view only…
When reading any topic which is either short or when scrolled to the bottom, the block:
<div id="topic-progress-wrapper" class="ember-view" style="right: 1em;">
...
</div>
is changed to
<div id="topic-progress-wrapper" class="docked ember-view" style="right: 1em; bottom: 82.4988px;">
...
</div>
Obviously, the bottom: property is calculated and the .docked class changes the position property from fixed to absolute. The bottom property seems to be calculated in (in the ember component discourse/components/topic-progress pretty-printed from minified in inspector):
_dock: function() {
var e = this.$();
if (e && 0 !== e.length) {
var t = window.pageYOffset || $("html").scrollTop()
, n = this.site.mobileView ? 0 : $("#topic-progress").height()
, i = $("#topic-bottom").offset().top + n
, o = $(window).height()
, s = $("#reply-control").height() || 0
, a = t >= i - o + s
, r = $("#main").height() - i;
s > 0 ? e.css("bottom", a ? r : s) : e.css("bottom", a ? r : ""),
this.set("docked", a);
var l = $("#reply-control .reply-area");
l && l.length > 0 ? e.css("right", l.offset().left + "px") : e.css("right", "1em")
}
},
Since this calculates the bottom property based on the window height of the #main selector, it does not include our header and, hence, the bottom property locates the box offset from the desired location.
Could bottom be calculated from the body.docked selector in this case instead?
(that’s all I have time for today…)