How do I force unpin objects (ex: menu bars) on websites such as leagueoflegends.com so that they cannot follow my scrolling?
Is there a way to force objects on websites to no longer follow my scrolling? Websites such as leagueoflegends.com have this and it's really annoying to have something follow me as I scroll through a web page. Is there something I can put into noscript to stop this from happening on specific sites or anything I can do to stop this from happening?
Chosen solution
You're right, it's a little disorienting finding the "selector" for a particular element. In this case, it is <div id="lol-pvpnet"> so you can use this rule to unfix it from the window and have it appear at the top of the page itself:
#lol-pvpnet {position:absolute !important;}
I've attached two screen shots showing how to add this rule in the Stylish extension.
Read this answer in context 👍 0All Replies (7)
Which page has the annoying menu? I didn't see it on the pages I sampled (I didn't try to play the game).
I'm not aware of a generic way to prevent sites from detecting that you've scrolled and moving elements into view. If the menu is an element you never care to interact with, you might be able to hide it using a style rule. Alternately, many sites can be customized with a userscript. All such interventions usually require hands on examination to create successfully.
I'm inclined to think it's just #elm { position: fixed }. If so, it's easy to override with a user style, which can be applied easiest with the Stylish extension.
For example, the following page demonstrates a menu that stays pinned on the right side of the window as you scroll:
In the Stylish extension, you can create the following style to prevent that menu from staying pinned.
@-moz-document domain("w3.org") {
#menu { position: static !important }
}
To do the same on other sites, you'll need to know which selector to use. You can find out by right-clicking the element in question and choosing Inspect Element. In the above example, you can see Inspector labels the menu as ul#menu, and we omit the tag (“ul”) for the sake of efficiency.
On the website (leagueoflegends.com) the PVP.net bar that is across the top of the site follows you when you scroll down. I looked through the source, but my JavaScript knowledge is severely outdated to follow most of it. There seems to be a function near the top that creates the bar to follow, but I don't know how to create a stylish script to prevent that from making the bar follow.
Hi Argath, I think Gingerbread_Man has the answer for that bar. (It's fixed to the inside edge of the browser window using a style rule, and I was thinking of those annoying boxes that slide down alongside the content.)
I want to do it specifically for this site now, but I'm unsure what to look for. This site seems especially complicated to find something that looks so simple to find. Thank you for the continued dialog.
Chosen Solution
You're right, it's a little disorienting finding the "selector" for a particular element. In this case, it is <div id="lol-pvpnet"> so you can use this rule to unfix it from the window and have it appear at the top of the page itself:
#lol-pvpnet {position:absolute !important;}
I've attached two screen shots showing how to add this rule in the Stylish extension.
Thank you so much for your time. Website design has changed so much since I last worked with it.