Skip to content

MAL Sticky Menu by marr

Imported and mirrored from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/178966.user.css

Screenshot of MAL Sticky Menu
Write a review Install Get Stylus

Details

Authormarr

LicenseCC-BY-NC-SA-4.0

Categorymyanimelist.net

Created

Updated

Size2.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

We all love MyAnimeList, but there's two things it lacks. The first being dark mode, there's a ton of scripts already. But the second is a sticky header. And that's where this script comes in. Nothing fancy, but it does the job. Especially created for people with a small screen who have to take screenshots for Official AWC with both stats far down the page, and their username hidden up top.

Notes

The script stickies the header with the MAL logo and username AND the menu bar on all pages.
On anime, manga, people and character pages, the title/name header is also stickied.

Safari user? Follow these instructions: https://myanimelist.net/blog.php?eid=878358

This style has been tested for compatibility with the following dark mode styles:

  • Dark/Night MyAnimeList (no issues)
  • MyAnimeList DeepDark (no issues)
  • MyAnimeList.net - Dark Theme (due to the header being transparent, it's nice to make the background of #headerSmall black instead of transparent)

Changelog (don't expect too much updates, because it is so basic ;-))
06/06/2022:

  • MAL added interest stacks and today I noticed they stickied some part of that new functionality (why they just don't sticky the nav bar and menu is beyond me...) Anyhow, that stickied stuff screwed with the script. It's all fixed now. It's still sticked, but no longer over the nav bar.

13/11/2020:

  • MAL changed broke something on anime picture gallery pages. This has been fixed!

05/04/2020:

  • You know those people with exceptional long profiles? Ever experienced that you wanted to comment on someone's profile page, but forgot whose profile you were visiting? Fear no more! The header containing the username is now also stickied!
  • Also added the the sticky header for clubs.

10/01/2020:

  • Removed a bit of redundant CSS
  • Added comments to what part of the CSS stickies what part of MAL. If you only want the MAL logo & Username part stickied, you can comment out the rest.

Source code

/* ==UserStyle==
@name           MAL Sticky Menu
@namespace      USO Archive
@author         lifeiscrazy
@description    `We all love MyAnimeList, but there's two things it lacks. The first being dark mode, there's a ton of scripts already. But the second is a sticky header. And that's where this script comes in. Nothing fancy, but it does the job. Especially created for people with a small screen who have to take screenshots for Official AWC with both stats far down the page, and their username hidden up top.`
@version        20220606.8.23
@license        CC-BY-NC-SA-4.0
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("myanimelist.net") {
/* Sticky MAL logo / list/PM/notifications/username bar */
#headerSmall  {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    z-index: 15;
}

/* Sticky menu + search bar */
#menu {
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 10;
}
}

@-moz-document url-prefix("https://myanimelist.net/anime/"), url-prefix("https://myanimelist.net/manga/"), url-prefix("https://myanimelist.net/people/"), url-prefix("https://myanimelist.net/character/"), url-prefix("https://myanimelist.net/profile/"), url-prefix("https://myanimelist.net/clubs") {
/* Sticky title/name on anime, manga, character, people, profile and club pages */
div#contentWrapper > div:not(#content) {
    position: sticky;
    position: -webkit-sticky;
    top: 82px;
    z-index: 5;
}
}

@-moz-document url-prefix("https://myanimelist.net/stacks/") {
/* fix the stickied stuff on stacks pages: title, tag, info-block and status */
  .stacks .stacks-detail h2.title
  {
    position: -webkit-sticky;
    top: 82px !important;
  }
  .stacks .stacks-detail .tag
  {
    position: -webkit-sticky;
    top: 112px !important;
  }
  .stacks .stacks-detail .info-block
  {
    position: -webkit-sticky;
    top: 142px !important;
  }
}

@-moz-document regexp("https://myanimelist.*pics") {
/* Fix sticky MAL logo + menus for image sections */
#header.header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    z-index: 15;
}
}

Reviews

No reviews yet.