我终于想出了如何在滚动条上以及单击按钮时捕捉到某个部分。单击时按钮会更改其颜色。您能帮我弄清楚滚动页面时如何更改按钮颜色吗?因此,当屏幕位于第1部分时,按钮1应该为灰色。如果我滚动到第2部分,则按钮2应该为灰色,其他按钮应恢复为黑色。这是代码:
<header class="nav">
<nav class="buttons">
<div class="button-holder">
<a class="buttons-a active" href="#panel1div">•</a>
<a class="buttons-a" href="#panel2div">•</a>
<a class="buttons-a" href="#panel3div">•</a>
<a class="buttons-a" href="#panel4div">•</a>
</div>
</nav>
</header>
<section id="paneldivs">
<article id="panel1div" class="panel1 panels">
<h1>Panel 1</h1>
</article>
<article id="panel2div" class="panel2 panels">
<h1>Panel 2</h1>
</article>
<article id="panel3div" class="panel3 panels">
<h1>Panel 3</h1>
</article>
<article id="panel4div" class="panel4 panels">
<h1>Panel 4</h1>
</article>
</section>
CSS
* {
padding: 0px;
margin: 0px;
outline: none;
}
body {
overflow-y: hidden;
}
h1 {
padding: 50vh 0;
font-size: 40px;
}
.buttons {
width: 30px;
position: fixed;
right: 0px;
z-index: 999;
}
.button-holder {
height: 100vh;
display: table-cell;
vertical-align: middle;
}
.buttons a {
display: block;
text-decoration: none;
font-size: 50px;
color: #000;
transition: all .3s ease;
-webkit-transition: all .3s ease;
}
a.active {
color: #999;
}
li {
list-style: none;
}
.panels {
float: left;
width: 100%;
text-align: center;
height: 100vh;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel1 {
background: #ccc;
}
.panel2 {
background: #ff0;
}
.panel3 {
background: #ddd;
}
.panel4 {
background: #0ff;
}
</style>
jQuery
<script>
$(document).ready(function(){
$(".buttons-a").click(function(){
$(this).addClass('active').siblings().removeClass('active');
})
});
// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $id.offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
});
var scrolling = false;
$(document).on("wheel mousewheel DOMMouseScroll", function(e) {
if (!scrolling) {
var scroll = $(document).scrollTop();
if (e.type === "mousewheel" || e.type === "wheel") {
if (e.originalEvent.deltaY > 0) {
down = true;
} else {
down = false;
}
} else if (e.type === "DOMMouseScroll") {
if (e.originalEvent.detail > 0) {
down = true;
} else {
down = false;
}
} else if (e.type === "keyup") {
var keycode = e.originalEvent.keyCode;
if (keycode === 40 || keycode === 32 || keycode === 34) { //down, space, pgdwn
down = true;
} else if (keycode === 38 || keycode === 33) { //up, pgup
down = false;
} else if (keycode === 35) { //end
down = 2;
} else if (keycode === 36) { //home
down = 3;
} else {
return;
}
} else {
return;
}
var destination = scroll;
var h = window.innerHeight;
if (down && scroll !== h * 3) {
destination = Math.floor((destination + h) / h) * h;
} else if (!down && scroll !== 0) {
destination = Math.ceil((destination - h) / h) * h;
} else {
return;
}
scrolling = true;
$("html, body").stop().animate({
scrollTop: destination
}, function() {
scrolling = false;
});
}
})
</script>
谢谢...
答案 0 :(得分:0)
您可以使用.scrollHeight
获取元素的窗口“滚动位置”,这是该元素的最高点。因此,元素的窗口“滚动顶部”将是.scrollHeight
,元素的窗口“滚动底部”将是.scrollHeight + (height of element)
。
编辑:使用jsfiddle更新