4 ms·

Dear HN. Please make the Hacker News header stick to the top of the browser

6 points by cbeach 1y ago

Dear HN team - please add the following styles to the top <tr> of the Hacker News UI so the header bar sticks to the top of the browser as we scroll down: position: sticky; top: 0; z-index: 10;

Bender 1y ago
This could probably be done in uBlock in My Filters.
- anfractuosity 1y ago
  Yup the following seemed to work for me - news.ycombinator.com###hnmain > tbody > tr:first-child:style( position: sticky; top: 0; z-index: 10;)
  - Bender 1y ago
    Confirmed that works here.
markus_zhang 1y ago
Please don't. It reduces size and it's not far to pull up quickly. Please make an option to turn it off if it is to be implemented.
collingreen 1y ago
Dear HN, please encourage more user control over the web instead. Wouldn't it be nice if it was easy to do this from within your own individual browser? There are plenty of extensions and such to let you do stuff but it would be cool if it became easy and normal and built in for users to adjust and control their experience instead of all the ad- and spyware nonsense.
TheCleric 1y ago
No thanks.
denkmoon 1y ago
No thanks. You can do it client side if you care. Are you not a hacker?
wizzwizz4 1y ago
Why do you need z-index? /* ==UserStyle== @name HN sticky topbar @namespace https://news.ycombinator.com/user?id=wizzwizz4 @version 1.0.0 @description Pins the HN topbar to the top of the viewport. @author wizzwizz4 ==/UserStyle== */ @-moz-document domain("news.ycombinator.com") { #hnmain > tbody > tr:first-child { position: sticky; top: 0; } } https://addons.mozilla.org/firefox/addon/styl-us/ https://addons.mozilla.org/firefox/addon/styl-us/
- wizzwizz4 1y ago
  Adding a z-index was a hack to workaround the .rotate180 class creating a new stacking context, causing downvotes to be rendered over the sticky topbar. This is hella overengineered. https://news.ycombinator.com/triangle.svg https://news.ycombinator.com/triangle.svg is 131 bytes! <svg height="32" viewBox="0 0 32 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m2 27 14-29 14 29z" fill="#999"/></svg> Meanwhile, the relevant section of https://news.ycombinator.com/news.css https://news.ycombinator.com/news.css is much larger: .rotate180 { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')"; } Just having a separate triangleup.svg and triangledown.svg would save bandwidth and rendering time, and make naïvely-written userstyles work properly! I thought Hacker News, of all websites, would be free from dodgy overengineered CSS…
  - wizzwizz4 1y ago
    This should be easy, but data URIs are fighting me. I've shoved another image there instead. Maybe someone else can get this working properly? /* ==UserStyle== @name HN sticky topbar @namespace https://news.ycombinator.com/user?id=wizzwizz4 @version 1.1.0-alpha @description Pins the HN topbar to the top of the viewport. @author wizzwizz4 ==/UserStyle== */ @-moz-document domain("news.ycombinator.com") { #hnmain > tbody > tr:first-child { position: sticky; top: 0; } .votearrow.rotate180 { transform: none; background-image: url(y18.svg); } }
deleted 1y ago
[deleted]
MBCook 1y ago
Why do people like this so much? It seems every web site does it these days and I HATE it personally. It takes up precious screen space for something that isn’t useful enough to need to be on screen constantly. And I can always just tap the top of the screen to jump to the top in a fraction of a second.
hysan 1y ago
Also voicing my opinion to please not do this. As a small phone + large font user, this would greatly reduce the amount of screen real estate. I think it would be a backwards step in accessibility for those with sight problems.
slater 1y ago
I threw this together a while back, use with Stylus extension[0]: https://pastebin.com/WzjQJ1Zp https://pastebin.com/WzjQJ1Zp [0] https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/ (Firefox) [1] https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne https://chromewebstore.google.com/detail/stylus/clngdbkpkpee... (Chrome)

6 points by cbeach 1y ago

Dear HN team - please add the following styles to the top <tr> of the Hacker News UI so the header bar sticks to the top of the browser as we scroll down: position: sticky; top: 0; z-index: 10;

Bender 1y ago

This could probably be done in uBlock in My Filters.

anfractuosity 1y ago
Yup the following seemed to work for me - news.ycombinator.com###hnmain > tbody > tr:first-child:style( position: sticky; top: 0; z-index: 10;)
- Bender 1y ago
  Confirmed that works here.

markus_zhang 1y ago

Please don't. It reduces size and it's not far to pull up quickly. Please make an option to turn it off if it is to be implemented.

collingreen 1y ago

Dear HN, please encourage more user control over the web instead. Wouldn't it be nice if it was easy to do this from within your own individual browser? There are plenty of extensions and such to let you do stuff but it would be cool if it became easy and normal and built in for users to adjust and control their experience instead of all the ad- and spyware nonsense.

TheCleric 1y ago

No thanks.

denkmoon 1y ago

No thanks. You can do it client side if you care. Are you not a hacker?

wizzwizz4 1y ago

Why do you need z-index? /* ==UserStyle== @name HN sticky topbar @namespace https://news.ycombinator.com/user?id=wizzwizz4 @version 1.0.0 @description Pins the HN topbar to the top of the viewport. @author wizzwizz4 ==/UserStyle== */ @-moz-document domain("news.ycombinator.com") { #hnmain > tbody > tr:first-child { position: sticky; top: 0; } } https://addons.mozilla.org/firefox/addon/styl-us/ https://addons.mozilla.org/firefox/addon/styl-us/

wizzwizz4 1y ago
Adding a z-index was a hack to workaround the .rotate180 class creating a new stacking context, causing downvotes to be rendered over the sticky topbar. This is hella overengineered. https://news.ycombinator.com/triangle.svg https://news.ycombinator.com/triangle.svg is 131 bytes! <svg height="32" viewBox="0 0 32 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m2 27 14-29 14 29z" fill="#999"/></svg> Meanwhile, the relevant section of https://news.ycombinator.com/news.css https://news.ycombinator.com/news.css is much larger: .rotate180 { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')"; } Just having a separate triangleup.svg and triangledown.svg would save bandwidth and rendering time, and make naïvely-written userstyles work properly! I thought Hacker News, of all websites, would be free from dodgy overengineered CSS…
- wizzwizz4 1y ago
  This should be easy, but data URIs are fighting me. I've shoved another image there instead. Maybe someone else can get this working properly? /* ==UserStyle== @name HN sticky topbar @namespace https://news.ycombinator.com/user?id=wizzwizz4 @version 1.1.0-alpha @description Pins the HN topbar to the top of the viewport. @author wizzwizz4 ==/UserStyle== */ @-moz-document domain("news.ycombinator.com") { #hnmain > tbody > tr:first-child { position: sticky; top: 0; } .votearrow.rotate180 { transform: none; background-image: url(y18.svg); } }

deleted 1y ago

[deleted]

MBCook 1y ago

Why do people like this so much? It seems every web site does it these days and I HATE it personally. It takes up precious screen space for something that isn’t useful enough to need to be on screen constantly. And I can always just tap the top of the screen to jump to the top in a fraction of a second.

hysan 1y ago

Also voicing my opinion to please not do this. As a small phone + large font user, this would greatly reduce the amount of screen real estate. I think it would be a backwards step in accessibility for those with sight problems.

slater 1y ago

I threw this together a while back, use with Stylus extension[0]: https://pastebin.com/WzjQJ1Zp https://pastebin.com/WzjQJ1Zp [0] https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/ (Firefox) [1] https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne https://chromewebstore.google.com/detail/stylus/clngdbkpkpee... (Chrome)