This blog post presents a simple bookmarklet designed to remove fixed position headers on websites. The author, frustrated by obstructive sticky headers, created a JavaScript snippet that can be saved as a bookmark. When clicked, this bookmarklet iterates through all elements on the current page, identifies those with a fixed position (typically headers), and sets their position to static, effectively removing the sticky behavior. The post highlights the bookmarklet's effectiveness in reclaiming screen real estate and improving the browsing experience. It also includes the code snippet for easy copying and implementation.
In a 2013 blog post titled "A bookmarklet to kill sticky headers," author Alasdair McDiarmid presents a JavaScript bookmarklet designed to remove fixed or "sticky" headers from web pages. He explains that while these headers can be useful in some contexts, they often obstruct content and become an annoyance, particularly on smaller screens where vertical real estate is precious. He identifies the primary CSS property responsible for this behavior as position: fixed; applied to the header element.
McDiarmid provides the full JavaScript code for the bookmarklet, which iterates through all elements on the page. For each element, it checks if the position style is set to fixed. If it is, the script changes the element's position to absolute, effectively removing the fixed positioning and allowing the header to scroll with the rest of the page content. He emphasizes the simplicity and effectiveness of this approach, noting it doesn't require complex parsing or manipulation of the page's stylesheets.
The author further explains how to create and use a bookmarklet: copying the provided JavaScript code and creating a new bookmark in the browser with the code pasted in as the URL. Clicking this bookmark on any webpage will then execute the script, modifying the fixed headers as described. He acknowledges the potential for unintended consequences, admitting that the script might affect elements other than headers that use position: fixed. However, he suggests the benefits of quickly disabling sticky headers generally outweigh this risk. The post concludes with the complete bookmarklet code, ready to be copied and used by readers.
Summary of Comments ( 83 )
https://news.ycombinator.com/item?id=42902395
Hacker News users generally praised the bookmarklet for its simplicity and effectiveness in removing annoying sticky headers. Some users expressed concerns about potential website breakage, while others offered alternative solutions like browser extensions (e.g., uBlock Origin) or Stylish. A few commenters suggested improvements to the bookmarklet's code, such as handling elements with
position: fixeddifferently or providing an option to restore the original header. The discussion also touched upon the broader issue of intrusive web design and the ongoing battle between users and websites trying to maximize ad revenue. One commenter even shared a personal anecdote about creating a similar tool years prior, highlighting the long-standing frustration with sticky headers.The Hacker News post discussing the "kill sticky headers" bookmarklet from 2013 has a significant number of comments, many of which express appreciation for the tool and its utility in dealing with the often-irritating behavior of sticky headers.
Several commenters share their own experiences with frustrating sticky headers, highlighting how they obstruct content or contribute to a poor browsing experience. This reinforces the value proposition of the bookmarklet. Some users express a desire for similar tools or extensions for their preferred browsers, indicating a broader demand for solutions to this common web design annoyance.
A few comments delve into the technical aspects of the bookmarklet, discussing its implementation and potential improvements. One commenter suggests a modification to make the bookmarklet's effect persistent across page reloads, while another proposes using
position: fixedinstead ofposition: stickyas a more comprehensive approach. There's also some discussion about the potential for unintended consequences, such as breaking website layouts that rely on sticky headers for proper functionality.Some commenters express appreciation for the simplicity and elegance of the bookmarklet's solution. The fact that it's a single line of JavaScript that can be easily bookmarked and used across different websites is seen as a major advantage.
A recurring theme is the general dislike for sticky headers within the web development community. Many commenters express frustration with the prevalence of this design pattern and the negative impact it has on usability. This sentiment underscores the demand for tools like the featured bookmarklet.
Finally, a few comments offer alternative solutions to dealing with sticky headers, including browser extensions and user stylesheets. These suggestions provide additional options for users who prefer different approaches to customizing their browsing experience. The overall tone of the comments section is positive, reflecting the usefulness of the bookmarklet and the shared frustration with intrusive sticky headers.