مشكلة
أواجه مشكلة في إضافة الفصول وإزالتها ، وتطبيق الأنماط على التمرير.
على وجه التحديد ، عندما أقوم بالتمرير لأسفل الصفحة:
- فئة
is-red
لا يزال في الأول.dot__outer
مجموعة عند التمرير لأسفل الصفحة عندما يجب إزالتها ، يجب أن تكون هناك مجموعة واحدة مميزة معis-red
صف دراسي - يبدو أن هناك مشكلة في عبارة if-statement ، حيث تظل الألوان ألوانها الافتراضية ولا تتغير عند التمرير
سلوك متوقع
التمرير:
- عند التمرير ، قم بإزالة الفصل
is-red
على جميع divs مع فئةdot__outer
- أضف فئة
is-red
إلى التاليdot__outer
في السلسلة بعد قيام المستخدم بتمرير لوحة معينة. أي إذا كان المستخدم في اللوحة الثانية ، فيجب تمييز المجموعة الثانية باللون الأحمر
ألوان النقاط:
- على الخلفيات السوداء ، يجب أن تكون النقاط وحدودها بيضاء
- على الخلفيات البيضاء ، يجب أن تكون النقاط وحدودها سوداء
- في كلتا الحالتين ، أي
dot__outer
مع فئةis-red
يجب أن يكون أحمر
scripts.js
$(function() {
function updateProgress() {
let dot = $(".dot");
let dotsBottom = $(".dots").offset().top + $(".dots").outerHeight();
let panelHeaderBottom =$(".panel-1").offset().top + $(".panel-1").outerHeight();
let panelRelatedTop = $(".panel-8").offset().top;
// If the `dot__outer` has a class of `is-active` the dot should also be red. By default, the dot and border should be white.
if (dot.parent().hasClass("is-red")) {
$(this).css("background", "red");
} else {
// If the position of the dots is less than the bottom of the header or greater than the top of the related section, the dots are white. Otherwise, the dots are black
if (dotsBottom < panelHeaderBottom || dotsBottom > panelRelatedTop) {
$(this).css("background", "#000");
} else {
$(this).css("background", "#fff");
}
}
$(".panel").each(function(index) {
let currentPosition = $(window).scrollTop();
let panelTop = $(this).offset().top;
let panelBottom = $(this).offset().top + $(this).outerHeight();
if ((currentPosition > panelTop) && (currentPosition < panelBottom)) {
$(".dot__outer").removeClass("is-red");
$(".dot__outer").eq(index).addClass("is-red");
} else {
$(".dot__outer").eq(0).addClass("is-red");
}
});
}
$(window).scroll(function() {
updateProgress();
});
});
index.html
<div class="panels">
<div class="panel panel-1">Panel #1</div>
<div class="panel panel-2">Panel #2</div>
<div class="panel panel-3">Panel #3</div>
<div class="panel panel-4">Panel #4</div>
<div class="panel panel-5">Panel #5</div>
<div class="panel panel-6">Panel #6</div>
<div class="panel panel-7">Panel #7</div>
<div class="panel panel-8">Panel #8</div>
</div>
<div class="dots">
<div class="dot__outer is-red">
<div class="dot"></div>
</div>
<div class="dot__outer">
<div class="dot"></div>
</div>
<div class="dot__outer">
<div class="dot"></div>
</div>
<div class="dot__outer">
<div class="dot"></div>
</div>
<div class="dot__outer">
<div class="dot"></div>
</div>
<div class="dot__outer">
<div class="dot"></div>
</div>
<div class="dot__outer">
<div class="dot"></div>
</div>
<div class="dot__outer">
<div class="dot"></div>
</div>
</div>
Codepen
https://codepen.io/yacoubian/pen/PBOVKw؟editors=1010
تحديث
تم إصلاح مشكلة التمرير ، وتم تحديث الشفرة.