Smart fixed ToC

Developer
Kev Rousseau
Size
4,648 Kb
Views
30,360
  1. Smart fixed ToC Previews
  2. Smart fixed ToC HTML Codes
  3. Smart fixed ToC CSS Codes
  4. Smart fixed ToC JS Codes

How do I make an smart fixed toc?

What is a smart fixed toc? How do you make a smart fixed toc? This script and codes were developed by Kev Rousseau on 12 August 2022, Friday.

Smart fixed ToC Previews
IQ Test

Smart fixed ToC - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smart fixed ToC</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header><h1>Banner</h1></header>
<div class="main"> <div class="container"> <nav class="chapter toc sticky" aria-label="Document" id="chapter-toc chapter--toc"> <h1 id="table-of-contents">Table of Contents</h1> <ul id="markdown-toc"> <li><a href="#subject1">Subject 1</a></li> <li><a href="#subject2">Subject 2</a></li> <li><a href="#subject3">Subject 3</a></li> <li><a href="#subject4">Subject 4</a></li> <li><a href="#subject5">Subject 5</a></li> </ul> </nav> <section id="subject1"> <h2>Subject 1</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> </section> <section id="subject2"> <h2>Subject 2</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction.</p> </section> <section id="subject3"> <h2>Subject 3</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> </section> <section id="subject4"> <h2>Subject 4</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> <p>Forces are reflected in the way user input affects elements on screen and how elements react to each other. The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> </section> <section id="subject5"> <h2>Subject 5</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> </section> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Smart fixed ToC - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";
* { box-sizing: border-box;
}
body { font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif; font-size: 16px; margin: 0; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; color: #212121; background-color: #f5f5f5;
}
header { background-color: gray; width: 100%; height: 150px; text-align: center; display: table; box-shadow: 0px 5px 10px #ccc;
}
header h1 { font-size: 3em; display: table-cell; vertical-align: middle;
}
.toc { background-color: #fff; bottom: 0; color: #444; font-size: 0.8em; left: 0; overflow-x: hidden; overflow-y: auto; position: absolute; top: 40%; width: 30%; z-index: 10; padding-left: 20px;
}
.toc #table-of-contents { display: none;
}
.toc.sticky ul { padding: 0; position: fixed; top: 40%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%);
}
.toc.sticky ul li { list-style: none; margin-top: 20px; position: relative;
}
.toc.sticky ul li a { text-decoration: none; color: #222; padding: 4px; padding-left: 35px;
}
.toc.sticky ul li a:hover { text-decoration: underline;
}
.toc.sticky ul li a:hover:before { border-color: #11accd;
}
.toc.sticky ul li a.active { color: #007d96;
}
.toc.sticky ul li a:before { content: ""; top: -3px; position: absolute; z-index: 100; margin-left: -35px; width: 20px; height: calc(100% + 1 * 3px); background-color: #ccc; border: 2px solid #999;
}
.toc.sticky ul li a:after { content: ""; background: #babec2; width: 2px; position: absolute; height: 40px; left: 11px; z-index: 0;
}
.toc.sticky ul li a.active:before { content: ""; background-color: #11accd; border: 2px solid #11accd;
}
.toc.sticky ul li:last-of-type a:after { display: none;
}
.main { padding: 20px; padding-left: 30%;
}
section { border: 1px solid #ccc; box-shadow: 0px 2px 10px #ccc; position: relative; margin-bottom: 30px; padding: 5px 20px;
}

Smart fixed ToC - Script Codes JS Codes

function demo() { return { init: function(attribute) { this.nav = $("nav"); this.names = $("section"); }, highlight: function() { this.currentArticle = this.findCurrentArticleInVP(); // we've got the content to highlight, let's add classes and expand menu-entries var $nav = this.nav; $nav.find("a").removeClass("active"); $nav.find('a[href="#' + this.currentArticle + '"]').addClass("active"); }, findCurrentArticleInVP: function() { // get the scroll height from the var viewport = $(".main")[0]; //grab the last one in case nothing is found var articleID = this.names[this.names.length - 1].id; // while our item are above the viewport, we enumerate for (var i = 0, l = this.names.length; i < l; i++) { var articleTop = this.names[i].getBoundingClientRect().top; if (isElementInViewport(viewport, this.names[i])) { //since the current element is farther, take the prev one if (i === 0) { articleID = this.names[i].id; } else { articleID = this.names[i - 1].id; } break; } } return articleID; } };
}
function isElementInViewport(viewport, el) { //special bonus for those using jQuery if (typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } var rect = el.getBoundingClientRect(); var viewportHeight = viewport.innerHeight; //100 is a subjective number. Acts like an offset to base the reaction of the highlight on. return rect.top >= 100;
}
function scrollToAnchor(aid) { var aTag = $("[id='" + aid + "']"); $("html,body").animate({ scrollTop: aTag.offset().top }, "slow");
}
var demo = new demo();
demo.init();
demo.highlight();
$(window).on("scroll", function() { demo.highlight();
});
$("nav a").on("click", function(e) { e.preventDefault(); scrollToAnchor(this.hash.substr(1)); return false;
});
Smart fixed ToC - Script Codes
Smart fixed ToC - Script Codes
Home Page Home
Developer Kev Rousseau
Username kevrousso
Uploaded August 12, 2022
Rating 3
Size 4,648 Kb
Views 30,360
Do you need developer help for Smart fixed ToC?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kev Rousseau (kevrousso) Script Codes
Name
Square animation on scroll with instant follow v2
Tutorial-Module
Base Pen
Square animation on scroll
1-Discover-Backpacker
Fing needle in haystack by splicing array in half
Find needle in haystack by looping through each item one by one
Menu example 2
HR-Admin-Web-App-UI-UX
Faster Custom Fuzzy Search
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!