This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I force unpin objects (ex: menu bars) on websites such as leagueoflegends.com so that they cannot follow my scrolling?

  • 7 replies
  • 1 has this problem
  • 14 views
  • Last reply by Argath

more options

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?

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 👍 0

All Replies (7)

more options

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.

more options

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.


more options

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.

more options

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.)

more options

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.

more options

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.

more options

Thank you so much for your time. Website design has changed so much since I last worked with it.