0
私はどこかに壊れているこの機能を持っていますが、私はエラーをキャッチできません。セクション1をクリックすると、セクション1には移動しません。私はredrawDotNavで何かを見逃したかもしれません。誰かが私のために見ていると、それは おかげで、セクションへのjqueryのスクロールが壊れています
$(window).scroll(function() {
redrawDotNav();
});
$('a.sec01').click(function() {
$('html, body').animate({
scrollTop: 0
}, 1000, function() {});
return false;
});
$('a.sec01').click(function() {
$('html, body').animate({
scrollTop: $('#sec02').offset().top
}, 1000, function() {});
return false;
});
$('a.sec03').click(function() {
$('html, body').animate({
scrollTop: $('#sec03').offset().top
}, 1000, function() {});
return false;
});
$('a.sec04').click(function() {
$('html, body').animate({
scrollTop: $('#sec04').offset().top
}, 1000, function() {});
return false;
});
function redrawDotNav() {
var section1Top = 0;
var section2Top = $('#sec02').offset().top - (($('#sec03').offset().top - $('#sec02').offset().top)/2);
var section3Top = $('#sec03').offset().top - (($('#sec04').offset().top - $('#sec03').offset().top)/2);
var section4Top = $('#sec04').offset().top - (($(document).height() - $('#sec04').offset().top)/2);
$('.sticky-indicators a').removeClass('active');
if ($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top) {
$('.sticky-indicators a.sec01').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top) {
$('.sticky-indicators a.sec02').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top) {
$('.sticky-indicators a.sec03').addClass('active');
} else if ($(document).scrollTop() >= section4Top) {
$('.sticky-indicators a.sec04').addClass('active');
}
}img {
height: 400px;
width: 100%;
float: left;
}
.col {
float: left;
width: 100%;
border: 1px solid red;
}
.sticky-indicators {
position: fixed;
top: 0;
right: 50px;
background: white;
width:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="sticky-indicators">
<ul>
<li><a href="#sec01" class="sec01">Section 01</a>
</li>
<li><a href="#sec02" class="sec02">Section 02</a>
</li>
<li><a href="#sec03" class="sec03">Section 03</a>
</li>
<li><a href="#sec04" class="sec04">Section 04</a>
</li>
</ul>
</nav>
<div class="col xs-col-12 xs-ralative">
<div id="sec01" class="col xs-col-12">
<img class="col xs-col-12" src="../styles/images/pdp-1.jpg" />
</div>
<div id="sec02" class="col xs-col-12">
<img class="col xs-col-12" src="../styles/images/5.jpg" />
</div>
<div id="sec03" class="col xs-col-12">
<img class="col xs-col-12" src="../styles/images/4.jpg" />
</div>
<div id="sec04" class="col xs-col-12 ">
<img class="col xs-col-12" src="../styles/images/7.jpg" />
</div>
</div>
おかげで、バディを忘れてしまった
$('a.sec02')あなたは自分のonclickのセレクタを複製します。本当に感謝。 – user3699998