allow "scroll spy" with the current section highlighted

[samuelcolvin]

I checked that...

• ... the documentation does not mention anything about my idea
• ... to my best knowledge, my idea wouldn't break something for other users
• ... there are no open or closed issues that are related to my idea

Description

It would be great if an extra attribute was set on md-nav__link to allow custom CSS to change how the page TOC looks to highlight the current item, rather than blur items above the current page y-offset.

This could be implemented by something like adding data-md-state="current" to the TOC item corresponding to the top section visible on the screen.

Use Cases

I'd like to highlight the page-TOC item corresponding to the section currently on screen, similar to:

• bootstrap 3's scrollspy: https://getbootstrap.com/docs/3.3/javascript/#scrollspy (see the right hand TOC on that page, as well as that section of the docs)
• simpler example: https://juliabyexample.helpmanual.io/

I'm not suggesting editing the standard CSS and thereby enforcing a change for most users, just allow users to implement this themselves by adding css like:

.md-nav__link[data-md-state=blur] {
    color: rgba(0,0,0,.87);  /* remove blurring */
}
.md-nav__link[data-md-state=current] {
    font-weight: 700;
}

[samuelcolvin]

Should involve a relatively small change to

mkdocs-material/src/assets/javascripts/components/Material/Nav/Blur.js

Lines 90 to 113 in 5ad1c70

	/* Scroll direction is down */
	if (this.offset_ <= offset) {
	for (let i = this.index_ + 1; i < this.els_.length; i++) {
	if (this.anchors_[i].offsetTop - (56 + 24) <= offset) {
	if (i > 0)
	this.els_[i - 1].dataset.mdState = "blur"
	this.index_ = i
	} else {
	break
	}
	}
	/* Scroll direction is up */
	} else {
	for (let i = this.index_; i >= 0; i--) {
	if (this.anchors_[i].offsetTop - (56 + 24) > offset) {
	if (i > 0)
	this.els_[i - 1].dataset.mdState = ""
	} else {
	this.index_ = i
	break
	}
	}
	}

Should be entirely backwards compatible.

[squidfunk]

Exact duplicate of #1102 ;-) Will be fixed with #1306, but this will take some time.

[samuelcolvin]

ha, looked but couldn't find a similar issue.