# Ajout d'un en-tête dans le thème qui perturbe la barre de progression du sujet (lorsqu'il est ancré)

**URL:** <https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393>\
**Category:** Product Support\
**Created:** [Septembre 17, 2018, 6:44 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393 "2018-09-17T18:44:58Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Lew\_Grothe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lew_grothe/32/337776_2.png) [@Lew\_Grothe](https://meta.discourse.org/u/Lew_Grothe)\
**Post date:** [Septembre 21, 2018, 1:30 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/3 "2018-09-21T01:30:38Z")

</div>

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:

```html
<div id="topic-progress-wrapper" class="ember-view" style="right: 1em;"> 
...
</div>

```

is changed to

```html
<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):

```js
        _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…)

---

_[View the full topic](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393)._