我试图在每个部分滚动时编写一个活动的链接状态。
我试图获取链接的哈希值。
我目前的代码是针对此行' console.log($(this).eq(i).hash);'正在回归' undefined'。
由于
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll</title>
<style media="screen">
body, html {
padding: 0;
margin: 0;
}
section {
padding: 6rem;
text-align: center;
}
section:nth-child(1) {
background: orangered;
}
section:nth-child(2) {
background: steelblue;
}
section:nth-child(3) {
background: orange;
}
section:nth-child(4) {
background: purple;
}
section:nth-child(5) {
background: red;
}
section:nth-child(6) {
background: black;
color: #fff;
}
nav {
background: black;
color: #fff;
padding: 2rem 0;
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
ul {
display: inline-block;
}
ul > li {
display: inline-block;
padding-right: 5px;
}
.active {
background: grey!important;
}
</style>
</head>
<body>
<nav>
<ul>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<a href="#section4">Section 4</a>
<a href="#section5">Section 5</a>
<a href="#section6">Section 6</a>
</ul>
</nav>
<section>
<h2 id="section1">Section 1</h2>
</section>
<section>
<h2 id="section2">Section 2</h2>
</section>
<section>
<h2 id="section3">Section 3</h2>
</section>
<section>
<h2 id="section4">Section 4</h2>
</section>
<section>
<h2 id="section5">Section 5</h2>
</section>
<section>
<h2 id="section6">Section 6</h2>
</section>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("a[href^='#']").each(function(i){
console.log($(this).eq(i).hash);
});
$(window).scroll(function(){
$("section").each(function(i){
if( $(document).scrollTop() >= $("section").eq(i).offset().top) {
$("section").eq(i).addClass("active");
} else {
$("section").eq(i).removeClass("active");
}
});
});
</script>
</body>
</html>
答案 0 :(得分:2)
jquery对象没有hash属性,底层的dom元素没有
而不是
$(this).eq(i).hash
尝试
this.hash