任何人都可以推荐一种资源，用于使用 jQuery Mobile 创建垂直导航条以进行快速滚动，就像 iphone“电话”应用程序联系人页面上的字母导航条一样？
也许可以看看https://github.com/watusi/jquery-mobile-iscrollview。看起来不太复杂
这是一个非常古老的线程，但也许它为某人指明了正确的方向。
这个是一个菜单，如果用户快速滚动，则会打开，提供将她/他带到页面内的某个位置，但在缓慢滚动时保持关闭状态。
目前它的样式与手机应用程序菜单不同，但可以使其看起来类似：
let scrollPosition = window.scrollY;
const init = () => {
console.log('initiating ...');
window.onscroll = () => {
// get the current position
let currentPosition = window.scrollY;
// calculate the distance using an absolute number
// allowing the user to acivate the menu by scrolling up
// or down
//
// this will open the modal while the scrolling continues
// imagine a mighty swipe up with your finger on a tablet:
// the modal will open, the scroll continues and the
// distance will trigger a second modal
// -> to prevent this we will set the `scrollPosition` to `-1`
// and thus deactivate the mechanism
if (scrollPosition > -1 &&
Math.abs(scrollPosition - currentPosition) > 650) {
scrollPosition = -1;
showNav();
}
setTimeout(() => {
// only update the position while the modal is not visible
// or else two or more modals could be triggered
if (scrollPosition > -1) {
scrollPosition = currentPosition;
}
}, 250);
};
document.querySelectorAll('.nav_link').forEach((link) => {
link.onclick = (event) => {
// jump to the target manually
// or else `hideNav()` would be triggered first and re-enable
// the scroll menu, then the link would lead the site to jump to
// it's target triggering a scroll event - in turn triggering
// the menu...
document.querySelector(new URL(link.href).hash).scrollIntoView();
hideNav();
event.preventDefault();
};
});
// hide the modal if the user clicks anywhere else on the screen
document.getElementById('NavModal').onclick = hideNav;
console.log('UI initiated.')
}
const showNav = () => {
document.getElementById('NavModal').classList.remove('hidden');
};
const hideNav = () => {
document.getElementById('NavModal').classList.add('hidden');
// re-enable the mechanism for the scroll navigation
scrollPosition = window.scrollY;
};
init();main {
width: 40rem;
margin: auto;
}
#NavModal {
position: fixed;
z-index: 1000000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}
#Nav {
background-color: #FFFFFF;
padding: 2rem;
width: 40%;
}
#Nav a {
display: block;
}
.hidden {
display: none !important;
}<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="color-scheme" content="dark light">
<title data-i18n-key="page_title">DEMO! Scroll Navigation</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="icon.svg" />
</head>
<body>
<noscript data-i18n-key="page_noscript">To use this site, please enable JavaScript.</noscript>
<main>
<h1 id="winnie-the-pooh">WINNIE-THE-POOH</h1>
<p>Taken from: <a href="https://www.gutenberg.org/files/67098/67098-h/67098-h.htm">The Project Gutenberg eBook of Winnie-the-Pooh, by A. A. Milne</a></p>
<h2 id="chapter-1">CHAPTER 1 - IN WHICH WE ARE INTRODUCED TO WINNIE-THE-POOH AND SOME BEES, AND THE STORIES BEGIN</h2>
<p>Here is Edward Bear, coming downstairs now, bump, bump, bump, on the back of his head, behind Christopher Robin. It is, as far as he knows, the only way of coming downstairs, but sometimes he feels that there really is another way, if only he could stop bumping for a moment and think of it. And then he feels that perhaps there isn't. Anyhow, here he is at the bottom, and ready to be introduced to you. Winnie-the-Pooh.</p>
<p>When I first heard his name, I said, just as you are going to say, "But I thought he was a boy?"</p>
<p>"So did I," said Christopher Robin.</p>
<p>"Then you can't call him Winnie?"</p>
<p>"I don't."</p>
<p>"But you said——"</p>
<p>"He's Winnie-ther-Pooh. Don't you know what 'ther' means?"</p>
<p>"Ah, yes, now I do," I said quickly; and I hope you do too, because it is all the explanation you are going to get.</p>
<p>Sometimes Winnie-the-Pooh likes a game of some sort when he comes downstairs, and sometimes he likes to sit quietly in front of the fire and listen to a story. This evening——</p>
<p>"What about a story?" said Christopher Robin.</p>
<p>"What about a story?" I said.</p>
<p>"Could you very sweetly tell Winnie-the-Pooh one?"</p>
<p>"I suppose I could," I said. "What sort of stories does he like?"</p>
<p>"About himself. Because he's that sort of Bear."</p>
<p>"Oh, I see."</p>
<p>"So could you very sweetly?"</p>
<p>"I'll try," I said.</p>
<p>So I tried.</p>
<p>[...]</p>
<h2 id="chapter-2">CHAPTER 2 - IN WHICH POOH GOES VISITING AND GETS INTO A TIGHT PLACE</h2>
<p>Edward Bear, known to his friends as Winnie-the-Pooh, or Pooh for short, was walking through the forest one day, humming proudly to himself. He had made up a little hum that very morning, as he was doing his Stoutness Exercises in front of the glass: Tra-la-la, tra-la-la, as he stretched up as high as he could go, and then Tra-la-la, tra-la—oh, help!—la, as he tried to reach his toes. After breakfast he had said it over and over to himself until he had learnt it off by heart, and now he was humming it right through, properly. It went like this:</p>
<p>Tra-la-la, tra-la-la,</p>
<p>Tra-la-la, tra-la-la,</p>
<p>Rum-tum-tiddle-um-tum.</p>
<p>Tiddle-iddle, tiddle-iddle,</p>
<p>Tiddle-iddle, tiddle-iddle,</p>
<p>Rum-tum-tum-tiddle-um.</p>
<p>[...]</p>
<h2 id="chapter-3">CHAPTER 3 - IN WHICH POOH AND PIGLET GO HUNTING AND NEARLY CATCH A WOOZLE</h2>
<p>The Piglet lived in a very grand house in the middle of a beech-tree, and the beech-tree was in the middle of the forest, and the Piglet lived in the middle of the house. Next to his house was a piece of broken board which had: "TRESPASSERS W" on it. When Christopher Robin asked the Piglet what it meant, he said it was his grandfather's name, and had been in the family for a long time, Christopher Robin said you couldn't be called Trespassers W, and Piglet said yes, you could, because his grandfather was, and it was short for Trespassers Will, which was short for Trespassers William. And his grandfather had had two names in case he lost one—Trespassers after an uncle, and William after Trespassers.</p>
<p>"I've got two names," said Christopher Robin carelessly.</p>
<p>"Well, there you are, that proves it," said Piglet.</p>
<p>One fine winter's day when Piglet was brushing away the snow in front of his house, he happened to look up, and there was Winnie-the-Pooh. Pooh was walking round and round in a circle, thinking of something else, and when Piglet called to him, he just went on walking.</p>
<p>"Hallo!" said Piglet, "what are you doing?"</p>
<p>"Hunting," said Pooh.</p>
<p>"Hunting what?"</p>
<p>"Tracking something," said Winnie-the-Pooh very mysteriously.</p>
<p>"Tracking what?" said Piglet, coming closer.</p>
<p>"That's just what I ask myself. I ask myself, What?"</p>
<p>"What do you think you'll answer?"</p>
<p>"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?"</p>
<p>[...]</p>
<h2 id="chapter-4">CHAPTER 4 - IN WHICH EEYORE LOSES A TAIL AND POOH FINDS ONE</h2>
<p>The Old Grey Donkey, Eeyore, stood by himself in a thistly corner of the forest, his front feet well apart, his head on one side, and thought about things. Sometimes he thought sadly to himself, "Why?" and sometimes he thought, "Wherefore?" and sometimes he thought, "Inasmuch as which?"—and sometimes he didn't quite know what he was thinking about. So when Winnie-the-Pooh came stumping along, Eeyore was very glad to be able to stop thinking for a little, in order to say "How do you do?" in a gloomy manner to him.</p>
<p>"And how are you?" said Winnie-the-Pooh.</p>
<p>Eeyore shook his head from side to side.</p>
<p>"Not very how," he said. "I don't seem to have felt at all how for a long time."</p>
<p>"Dear, dear," said Pooh, "I'm sorry about that. Let's have a look at you."</p>
<p>So Eeyore stood there, gazing sadly at the ground, and Winnie-the-Pooh walked all round him once.</p>
<p>"Why, what's happened to your tail?" he said in surprise.</p>
<p>"What has happened to it?" said Eeyore.</p>
<p>"It isn't there!"</p>
<p>"Are you sure?"</p>
<p>"Well, either a tail is there or it isn't there. You can't make a mistake about it. And yours isn't there!"</p>
<p>"Then what is?"</p>
<p>"Nothing."</p>
<p>[...]</p>
<h2 id="chapter-5">CHAPTER 5 - IN WHICH PIGLET MEETS A HEFFALUMP</h2>
<p>One day, when Christopher Robin and Winnie-the-Pooh and Piglet were all talking together, Christopher Robin finished the mouthful he was eating and said carelessly: "I saw a Heffalump to-day, Piglet."</p>
<p>"What was it doing?" asked Piglet.</p>
<p>"Just lumping along," said Christopher Robin. "I don't think it saw me."</p>
<p>"I saw one once," said Piglet. "At least, I think I did," he said. "Only perhaps it wasn't."</p>
<p>"So did I," said Pooh, wondering what a Heffalump was like.</p>
<p>"You don't often see them," said Christopher Robin carelessly.</p>
<p>"Not now," said Piglet.</p>
<p>"Not at this time of year," said Pooh.</p>
<p>[...]</p>
</main>
<div id="NavModal" class="hidden">
<div id="Nav">
<a href="#winnie-the-pooh" class="nav_link">WINNIE-THE-POOH</a>
<a href="#chapter-1" class="nav_link">Chapter 1</a>
<a href="#chapter-2" class="nav_link">Chapter 2</a>
<a href="#chapter-3" class="nav_link">Chapter 3</a>
<a href="#chapter-4" class="nav_link">Chapter 4</a>
<a href="#chapter-5" class="nav_link">Chapter 5</a>
</div>
</div>
</body>
</html>