# 在移动端将滚动进度条移至标题下方

**URL:** <https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062>\
**Category:** Feature\
**Created:** [2018年十月20日 16:18 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062 "2018-10-20T16:18:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jtbayly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jtbayly/32/119510_2.png) [@jtbayly](https://meta.discourse.org/u/jtbayly)\
**Post date:** [2018年十月20日 16:18 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/1 "2018-10-20T16:18:03Z")

</div>

Continuing the discussion from [Smart mobile header](https://meta.discourse.org/t/smart-mobile-header/99846/21):

I think putting the scroll progress bar up below the header on mobile (as @awesomerobot proposed) is worthwhile to consider doing.

---

<div class="post-metadata">

**Author:** ![jtbayly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jtbayly/32/119510_2.png) [@jtbayly](https://meta.discourse.org/u/jtbayly)\
**Post date:** [2018年十月20日 16:19 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/2 "2018-10-20T16:19:34Z")

</div>

Here’s the original proposal:

> [@awesomerobot](#):
>
> …maybe someday it would be nice to merge progress/title on mobile? I don’t really care about the category too much when I’m scrolling anyway. Just a quick thought for future enhancement.
> 
> ![43%20PM](https://global.discourse-cdn.com/meta/original/3X/d/f/df0a522b54998c106e7e38f30c6ec43f17671464.png)

---

<div class="post-metadata">

**Author:** ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)\
**Post date:** [2019年三月28日 17:53 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/3 "2019-03-28T17:53:40Z")

</div>

I’ve been trying to do accomplish this

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2019年三月28日 23:07 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/4 "2019-03-28T23:07:00Z")

</div>

There’s a couple of difficult things here:

- where does the “jump to any post, jump to top, jump to bottom” functionality go, if you remove the target tap area to expand the progress bar?

- where do category, tags, etc go now that the area under the title is monopolized by position and total counts?

I don’t see any future in this particular approach, personally.

---

<div class="post-metadata">

**Author:** ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)\
**Post date:** [2019年三月28日 23:12 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/5 "2019-03-28T23:12:35Z")

</div>

Hey Jeff, thanks for acknowloding this idea.  
A colleague of mine made this mockup of how it would look:

 ![x](https://global.discourse-cdn.com/meta/original/3X/8/6/860154375a519ce7f1c5595a71c29e41c6ca4f0e.png)  
The bar will go right underneath the header area, under the category/tags. I hope that addressed your concerns.

As for the more precise navigation part, I suggest that if a user taps on the bar then it’ll open up the navigation menu that already exists (no new UI work there).

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2019年三月29日 00:26 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/6 "2019-03-29T00:26:12Z")

</div>

> [@nexo](#):
>
> As for the more precise navigation part, I suggest that if a user taps on the bar then it’ll open up the navigation menu that already exists (no new UI work there).

That won’t work. Tapping on the navbar itself will take you to the top of the topic like it usually does. Or to the homepage if you tap on the logo:

![image](https://global.discourse-cdn.com/meta/original/3X/3/b/3b0975d883e81f402ca8a86e2c97d746412c04f8.png)

I don’t know how a user could tap on a 3px tall element.

This is a bad idea going down a bad path, and should not be executed.

---

<div class="post-metadata">

**Author:** ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)\
**Post date:** [2019年三月29日 00:45 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/7 "2019-03-29T00:45:18Z")

</div>

You’re right. What about turning this into a sort of _minimalist view_ where it’s purely visual not actually functional. It would show the reader how deep they are into the thread.

I agree with you, however, any final thoughts on that?

---

<div class="post-metadata">

**Author:** ![jtbayly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jtbayly/32/119510_2.png) [@jtbayly](https://meta.discourse.org/u/jtbayly)\
**Post date:** [2019年三月29日 01:22 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/8 "2019-03-29T01:22:42Z")

</div>

Toward what end? You’ve still got to have the other element that already shows that info on the screen, don’t you?

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2019年三月29日 21:13 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/10 "2019-03-29T21:13:37Z")

</div>

I did work with the idea of having a header that integrates progress after initially suggesting it, and it’s extra tricky. You’re always going to lose something by doing this, so it didn’t seem worth investigating further.

It would be much much easier to build and maintain something that restyles/simplifies the existing progress bar.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2019年三月29日 22:47 UTC](https://meta.discourse.org/t/move-scroll-progress-bar-below-header-on-mobile/100062/11 "2019-03-29T22:47:20Z")

</div>

I’m not against _any_ kind of change here, I just don’t see a reasonable path forward, and I think our current design is pretty good. These are the kinds of situations where I like to defer for a year or two 😉
