I think this will do it ...
The CSS
<style>
.sticky {
    position: fixed;
    top: 0;
    right: 20px;
    left: 210px;
    margin-top: 0;
}
</style>

And you'll need an event listener ...
document.addEventListener( 'scroll',
  function(){
    var h3s = document.getElementById('content').getElementsByTagName('h3')
    for (var i=0;i<h3s.length; i++) {
      var h3 = h3s[i]
      // for perfectionists ... unsticky "fails" on page resize
      if (h3.classList.contains('sticky')) {
        var originalOffset = h3.getAttribute('data-original-offsettop')
        if (window.pageYOffset<=originalOffset) {
          h3.classList.remove("sticky");
        }
      } else if (window.pageYOffset > h3.offsetTop) {
        h3.setAttribute('data-original-offsettop', h3.offsetTop)
        h3.classList.add("sticky");
      }
    }
  }
)

I ran the above on the existing changelog and it seemed to work OK.

-Tim

On Wed, Sep 9, 2020 at 9:25 AM Christopher Schultz
<ch...@christopherschultz.net> wrote:
>
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA256
>
> All,
>
> Could someone better at CSS look into this for me?
>
> I sometimes find myself searching the changelog for some string e.g.
> "keystore". I generally do that by loading-up the changelog in my
> browser and using the browser's "Find" feature to search the text. (Duh)
> .
>
> The changelog for each version, however, usually stretches to a few
> screen-heights and it's often not possible to see the version number
> where a particular changelog item is included. I often have to find
> something, then scroll "up" to see the version number.
>
> This isn't a big deal when locating something specific: it generally
> occurs once (like a bug id) and then you go look at the version number
> and you are done.
>
> But when trying to find something that happened between versions X and
> Y, there is a great deal of scrolling, searching, re-scrolling,
> re-searching, etc. which may be avoided if the following is possible.
> (And I'm sure it is).
>
> What I'd like is for the <h3> headings on the changelog pages to
> "stick" to the top of the screen as they are scrolled. So, for
> example, if you load the changelog for Tomcat 9, you'll see at the
> very top of the page there is the standard Tomcat documentation header
> ("Tomcat", current version number, latest release-date), then the
> "Changelog" header, then the first <h3> which is currently "Tomcat
> 9.0.37 (markt)".
>
> As you scroll, the "Tomcat 9.0.37 (markt)" eventually scrolls up off
> the top of the visible page (as web pages generally do). Instead, when
> that heading gets to the top of the page, I'd like it to "stick" there
> until scrolling replaces it with the next <h3> in the order, which is
> currently "Tomcat 9.0.36 (markt)".
>
> This would keep the version number where fixes/improvements have been
> made at the top of the screen during any searching activity and make
> it much easier to hunt for certain kinds of fixes.
>
> Is anyone willing to look into implementing the above?
>
> - -chris
> -----BEGIN PGP SIGNATURE-----
> Comment: Using GnuPG with Thunderbird - https://www.enigmail.net/
>
> iQIzBAEBCAAdFiEEMmKgYcQvxMe7tcJcHPApP6U8pFgFAl9Y17oACgkQHPApP6U8
> pFjN0xAAhfFd0Yl69XF38f5tSYtMQMQcDNIOywVDXCIBWnYaSIUPWvzFAPeq0uv/
> t7Hvc2MlQ+QlKfu3aiq0PEOpCRy2QEQ9EDDGEonxRPvhQrkhUIDlkuGpTvYrS1XA
> RF7XSUuV+g9eVyFeh1KQEQP1BCAKXjxXLNl51v6xHP+FMiySAtAgCF7U3DVbB/fw
> rXILy6/wgSjdWyQkcC+yZ/5OHxp9R3s8E80MT0Kdwp7oTtdlCq0bFOdcmqQZqC92
> 9658bGQhllYfF7eqMeWRVO8TdlIyAI0RFJU8gVlt9IGWy5OHzc6QB853O4ejA8G0
> xrjeKVwzWYBNUImkfxxqXoOSdK8/rKK/zEZtBi7GuHeYLiqn8JBvFS4NZGp0rMNY
> xWYAf0Nhql+y+gDDbpk10CplptNePCUXjF6fSX7IPSsgpBwyjDbGl671s08DOM83
> TJq5NwwjJS37kPmHY7g0DRdhtn0dKf45H97Kdpqm/BEp8Vua63eEtK8WFFXmOVBd
> hhEADE8ccQg639U5jxshI9F3wxnChNcfOSKDcdxmCU0Rgfslq3ujgqzZ2sqCHNVP
> 9SwJiolW76PUFLG02LasM1FYzPSYv85a/0DH5lPGUMpB3EvczCnu5FWagsTS3fu5
> 8JCHz7Eyo1SrijeMtE/NgSV0LpKbuGjh8v+BUBODiW+jD8vfxxI=
> =4+RB
> -----END PGP SIGNATURE-----
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: dev-unsubscr...@tomcat.apache.org
> For additional commands, e-mail: dev-h...@tomcat.apache.org
>

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@tomcat.apache.org
For additional commands, e-mail: dev-h...@tomcat.apache.org

Reply via email to