Javascript 基于mdl模板的引导scrollspy
我已经从下载了Android.com模板。并对其进行编辑以删除一些特征 但我现在要做的是添加一个新功能：Scrollspy。我希望在用户滚动页面时更新突出显示的菜单选项 我从中获得了scrollspy的代码，并尝试在我的代码上实现，但没有成功。它仍然在工作，好像我从未改变过什么。我想我可能错过了什么，我需要帮助。这是我的密码： index.htmlJavascript 基于mdl模板的引导scrollspy,javascript,css,twitter-bootstrap,material-design-lite,scrollspy,Javascript,Css,Twitter Bootstrap,Material Design Lite,Scrollspy,我已经从下载了Android.com模板。并对其进行编辑以删除一些特征 但我现在要做的是添加一个新功能：Scrollspy。我希望在用户滚动页面时更新突出显示的菜单选项 我从中获得了scrollspy的代码，并尝试在我的代码上实现，但没有成功。它仍然在工作，好像我从未改变过什么。我想我可能错过了什么，我需要帮助。这是我的密码： index.html <!doctype html> <html lang="en"> <head> <meta c
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Some Content">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="material.min.css">
<link rel="stylesheet" href="styles.css">
<!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<div class="android-header mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<span class="android-title mdl-layout-title">
<img class="android-logo-image" src="images/android-logo.png">
</span>
<!-- Add spacer, to align navigation to the right in desktop -->
<div class="android-header-spacer mdl-layout-spacer"></div>
<!-- Navigation -->
<div class="android-navigation-container">
<nav class="android-navigation mdl-navigation navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<div class="nav navbar-nav">
<a class="mdl-navigation__link mdl-typography--text-uppercase" href="#home">Home</a>
<a class="mdl-navigation__link mdl-typography--text-uppercase" href="#howtoplay">How to play</a>
<a class="mdl-navigation__link mdl-typography--text-uppercase" href="#tryit">Try it</a>
<a class="mdl-navigation__link mdl-typography--text-uppercase" href="#contribute">Contribute</a>
<a class="mdl-navigation__link mdl-typography--text-uppercase" href="#getupdated">Stay tuned</a>
<a class="mdl-navigation__link mdl-typography--text-uppercase" href="#contact">Contact Us</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<span class="android-mobile-title mdl-layout-title">
<img class="android-logo-image" src="images/android-logo.png">
</span>
<button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
<li class="mdl-menu__item">5.0 Lollipop</li>
<li class="mdl-menu__item">4.4 KitKat</li>
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
</div>
</div>
<div class="android-content mdl-layout__content">
<a name="top"></a>
<div class="android-be-together-section mdl-typography--text-center" id="home" class="container-fluid">
<div class="logo-font android-slogan">think. tap. quickly.</div>
<div class="logo-font android-sub-slogan">challenge your mind with the queen of sciences - Math</div>
<a href="#screens">
<button class="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">expand_more</i>
</button>
</a>
</div>
<div class="android-screen-section mdl-typography--text-center" id="howtoplay" class="container-fluid">
<!-- Some content here -->
</div>
<div class="android-wear-section" id="tryit">
<!-- Some Content Here-->
</div>
<div class="android-customized-section" id="contribute">
<!-- Some Content Here-->
</div>
<div class="android-wear-section" id="getupdated">
<!-- Some Content Here-->
</div>
<div class="android-more-section" id="contact">
<!-- Some Content Here-->
</div>
</div>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
标题
身体{
位置：相对位置；
}
更多
5.0棒棒糖
第4.4节
4.3果冻豆
Android历史记录
滚动material.min.js//来自的ScrollSpy脚本https://github.com/makotot/scrollspy
//执照：麻省理工学院
//由KScandrett更改-添加了标题偏移量（以像素为单位）。
函数ScrollSpy（包装器，opt）{
this.doc=文件；
this.wrapper=（typeof wrapper=='string'）？this.doc.querySelector（wrapper）：wrapper；
this.nav=this.wrapper.querySelectorAll（opt.nav）；
this.contents=[]；
this.win=窗口；
this.winH=this.win.innerHeight；
this.className=opt.className；
this.callback=opt.callback；
this.offset=opt.offset | | 0；//KS添加了-offset以说明导航标头高度
this.init（）；
}
ScrollSpy.prototype.init=函数（）{
this.contents=this.getContents（）；
this.attachEvent（）；
};
ScrollSpy.prototype.getContents=函数（）{
var targetList=[]；
对于（var i=0，max=this.nav.length；iscrollTop）；
};
ScrollSpy.prototype.markNav=函数（元素）{
var navItems=this.nav，
isAlreadyMarked=false；
对于（变量i=0，max=navItems.length；i <div id="js-scrollspy">
<ul class="js-scrollspy-nav">
<li><a href="#link1">link 1</a></li>
<li><a href="#...">...</a></li>
<li><a href="#...">...</a></li>
<li><a href="#...">...</a></li>
</ul>
...
<div>
<div id="link1"></div>
...
</div>
</div>
<script>
var spy = new ScrollSpy('#js-scrollspy', {
nav: '.js-scrollspy-nav > li > a',
offset: 64, // offset in pixels for header overlap
className: 'is-inview',
callback: function () {}
});
</script>
...
...
var spy=new ScrollSpy（“#js ScrollSpy”{
导航：'.js scrollspy nav>li>a'，
偏移量：64，//头重叠的偏移量（以像素为单位）
类名：'is inview'，
回调：函数（）{}
});
>li