add/removeClass 滚动时多次
add/removeClass multiple times when scrolled
这是我 运行 遇到的问题。我想在向下滚动时添加 addClass ,当我进一步滚动时再次添加 class 。我希望你明白我想做什么。
$(document).ready(function(){
'use strict';
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// REMOVE
$('li').removeClass('C');
}
else{
// ADD
$('li').addClass('C');
}
return false;
});
});
和CSS部分
.C
{
/* TRANSLATE */
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
/* TRANSITION */
transition: all 0.6s ease;
}
我听说这可能与计数器有关,但我是 JQuery 的新手并且我了解这种语言的基础知识。
这是我正在尝试做的事情:http://www.phasesmag.com
是的。 类 通常添加一次。您可能可以使用元素本身的 className
属性 来完成它,但我认为最好在数据属性中保留一个计数器。
但是,多次添加 class 不会使 CSS 应用多次,因此即使多次添加 class 也可以,或者您可以保留CSS 中的一个计数器,那么您仍然无法获得预期的效果。
您发布的页面似乎以不同的方式进行。它只是改变了元素上的 'active' class ,因此一个元素始终处于活动状态。我没有检查所有脚本和上面的 CSS,但似乎 'active' class 只是一个书签,用于记住当前页面是哪一页。
切换活动 class 应该已经可以使用您的代码。示例页面的所有块都位于彼此下方,您可以通过滚动条看出这一点。它只是在滚动时有很大的跳跃,可能使用 JavaScript.
在下面的代码中,我试图模仿它。我使用了函数 'scrollIntoView'。不幸的是,此功能在除 FireFox 之外的任何其他浏览器中都不支持动画,因此它只能在页面之间快速跳转。要解决这个问题,您可以使用 jQuery 插件来制作动画版本的 scrollIntoView。
不过,基本功能仍然有效。
$(document).ready(function() {
'use strict';
$(window).bind('mousewheel DOMMouseScroll', function(event) {
var $active = $('li.active');
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
var $new = $active.prev();
$active.parent().removeClass('up');
$active.parent().addClass('down');
} else {
var $new = $('li.active').next();
$active.parent().addClass('up');
$active.parent().removeClass('down');
}
if ($new.length > 0) {
$active.removeClass('active');
$new.addClass('active');
// Here I call scrollIntoView of the element. However the options to add animation to it
// are not widely supported, so it will jump instantly into view.
// Here you could try to animate it using jQuery
$new[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
}
return false;
});
});
html, body, ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
margin: 0;
height: 100vh;
border:30px solid #ccc;
box-sizing: border-box;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active">This is page 1. Welcome to you!</li>
<li>This is page 2, where you first notice the scroll. The code snippt causes the parent page to jump too. Sorry.</li>
<li>This is page 3, where nothing happens. </li>
<li>This is page 4. Period.</li>
<li>This is page 5, not the last one yet.</li>
<li>This is page 6, concluding the presentation.</li>
<li>This is page 7, the last one. Thank you. Bye!</li>
</ul>
这是我 运行 遇到的问题。我想在向下滚动时添加 addClass ,当我进一步滚动时再次添加 class 。我希望你明白我想做什么。
$(document).ready(function(){
'use strict';
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// REMOVE
$('li').removeClass('C');
}
else{
// ADD
$('li').addClass('C');
}
return false;
});
});
和CSS部分
.C
{
/* TRANSLATE */
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
/* TRANSITION */
transition: all 0.6s ease;
}
我听说这可能与计数器有关,但我是 JQuery 的新手并且我了解这种语言的基础知识。 这是我正在尝试做的事情:http://www.phasesmag.com
是的。 类 通常添加一次。您可能可以使用元素本身的 className
属性 来完成它,但我认为最好在数据属性中保留一个计数器。
但是,多次添加 class 不会使 CSS 应用多次,因此即使多次添加 class 也可以,或者您可以保留CSS 中的一个计数器,那么您仍然无法获得预期的效果。
您发布的页面似乎以不同的方式进行。它只是改变了元素上的 'active' class ,因此一个元素始终处于活动状态。我没有检查所有脚本和上面的 CSS,但似乎 'active' class 只是一个书签,用于记住当前页面是哪一页。
切换活动 class 应该已经可以使用您的代码。示例页面的所有块都位于彼此下方,您可以通过滚动条看出这一点。它只是在滚动时有很大的跳跃,可能使用 JavaScript.
在下面的代码中,我试图模仿它。我使用了函数 'scrollIntoView'。不幸的是,此功能在除 FireFox 之外的任何其他浏览器中都不支持动画,因此它只能在页面之间快速跳转。要解决这个问题,您可以使用 jQuery 插件来制作动画版本的 scrollIntoView。
不过,基本功能仍然有效。
$(document).ready(function() {
'use strict';
$(window).bind('mousewheel DOMMouseScroll', function(event) {
var $active = $('li.active');
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
var $new = $active.prev();
$active.parent().removeClass('up');
$active.parent().addClass('down');
} else {
var $new = $('li.active').next();
$active.parent().addClass('up');
$active.parent().removeClass('down');
}
if ($new.length > 0) {
$active.removeClass('active');
$new.addClass('active');
// Here I call scrollIntoView of the element. However the options to add animation to it
// are not widely supported, so it will jump instantly into view.
// Here you could try to animate it using jQuery
$new[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
}
return false;
});
});
html, body, ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
margin: 0;
height: 100vh;
border:30px solid #ccc;
box-sizing: border-box;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active">This is page 1. Welcome to you!</li>
<li>This is page 2, where you first notice the scroll. The code snippt causes the parent page to jump too. Sorry.</li>
<li>This is page 3, where nothing happens. </li>
<li>This is page 4. Period.</li>
<li>This is page 5, not the last one yet.</li>
<li>This is page 6, concluding the presentation.</li>
<li>This is page 7, the last one. Thank you. Bye!</li>
</ul>