Я пытаюсь переместить фиксированные div (каждый .container_fluid) в представление, основываясь на текущем просмотре div и направлении прокрутки.Я использую JavaScript и JQuery.По большей части это работает при движении в одном направлении (от начала до конца или от конца к началу), но если я меняю направление на мыши / трекпаде, прокрутка идет в неправильном направлении для одного события прокрутки, прежде чем идти в намеченном направлении.в следующем событии прокрутки (если это имеет смысл).
Например, если вы спускаетесь вниз - вверх - вверх, он движется так, как будто вы спустились вниз - вниз - вверх, я думаю, что это может бытьошибка в том, как я использовал логические состояния, но я не уверен, как это исправить.
Прокрутка вниз должна отображать следующий div, а прокрутка вверх - предыдущий divПосмотреть.Кроме того, если вы выполняете прокрутку назад-назад слишком быстро, элементы div некоторое время не перемещаются (как я могу это исправить? У меня установлена функция debounce на 100 мс).
jsfiddle здесь
<div class="container-fluid" id="home">
<h1>HOME</h1>
</div>
<div class="container-fluid" id="typetester_patternmaker">
<div class="row">
<div class="col-6" id="typetester">
<h2>TYPE TESTER</h2>
<p>(ttpm_on = 1)</p>
</div>
<div class="col-6" id="patternmaker">
<h2>PATTERN MAKER</h2>
</div>
</div>
</div>
<div class="container-fluid" id="structure_precedents">
<div class="row">
<div class="col-6" id="structure" autofocus>
<h2>LETTERFORM STRUCTURE</h2>
<p>(ttpm_on & sp_on = 1)</p>
</div>
<div class="col-6" id="precedents">
<h2>PRECEDENTS</h2>
</div>
</div>
</div>
<div class="container-fluid" id="download_colophon">
<div class="row">
<div class="col-6" id="download">
<h2>DOWNLOAD</h2>
<p>(ttpm_on, sp_on, & dc_on = 1)</p>
</div>
<div class="col-6" id="colophon">
<h2>COLOPHON</h2>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/nav.js"></script>
$(document).ready(function() {
// mouse structure & nav
var ttpm_on = 0,
sp_on = 0,
dc_on = 0,
menu_on = 0;
var startScroll = $(document).height() / 2;
var lastScrollTop = startScroll;
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// these four functions are to navigate to their div
function ttpm() {
ttpm_on = 1; // ttpm_on = 1 means the #typetester_patternmaker div is in view (i.e. div is positioned with top = 0)
sp_on = 0;
dc_on = 0;
$("#typetester_patternmaker").animate({
top: '0vh',
}, 1000, function() {});
$("#structure_precedents").animate({
top: '100vh',
}, 1000, function() {});
$("#download_colophon").animate({
top: '100vh',
}, 1000, function() {});
}
$("#typetester_patternmaker, #typetester_patternmaker_button").click(function() {ttpm()} );
function sp() {
ttpm_on = 1;
sp_on = 1;
dc_on = 0;
$("#structure_precedents").animate({
top: '0vh',
}, 1000, function() {});
$('h2').animate({
'padding-top': '3vh',
}, 1000, function() {});
$("#typetester_patternmaker").animate({
top: '0vh',
}, 1000, function() {});
$("#download_colophon").animate({
top: '100vh',
}, 1000, function() {});
}
$("#structure_precedents, #structure_precedents_button").click(function() {sp()} );
function dc() {
ttpm_on = 1;
sp_on = 1;
dc_on = 1;
$("#download_colophon").animate({
top: '0vh',
}, 1000, function() {});
$('h2').animate({
'padding-top': '3vh',
}, 1000, function() {});
$("#structure_precedents").animate({
top: '0vh',
}, 1000, function() {});
$("#typetester_patternmaker").animate({
top: '0vh',
}, 1000, function() {});
}
$("#download_colophon, #download_colophon_button").click(function() {dc()} );
function hb() {
ttpm_on = 0;
sp_on = 0;
dc_on = 0;
$("#structure_precedents").animate({
top: '90vh',
}, 1000, function() {});
$("#typetester_patternmaker").animate({
top: '85vh',
}, 1000, function() {});
$("#download_colophon").animate({
top: '95vh',
}, 1000, function() {});
$('h2').animate({
'padding-top': '0.75vh',
}, 1000, function() {});
}
$("#home_button").click(function() {hb()} );
// scroll nav
var scrollNav = debounce(function() {
var st = $(window).scrollTop();
if (ttpm_on == 0) {
if (st > lastScrollTop) { ttpm(); }
}
else if (ttpm_on == 1 && sp_on == 0) {
if (st > lastScrollTop) { sp(); }
else { hb(); }
}
else if (ttpm_on == 1 && sp_on == 1 && dc_on == 0) {
if (st > lastScrollTop) { dc(); }
else { ttpm(); }
}
else if (ttpm_on == 1 && sp_on == 1 && dc_on == 1) {
if (st <= lastScrollTop) { sp(); }
}
lastScrollTop = st;
}, 100, true);
window.onscroll = function() { scrollNav() };
});