Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何控制类何时添加到jQuery滚动中的元素中

如何控制类何时添加到jQuery滚动中的元素中
EN

Stack Overflow用户
提问于 2017-09-23 03:07:05
回答 1查看 40关注 0票数 0

在滚动页面时,我使用以下javascript来添加和删除类:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function($) {
  $.fn.timeline = function() {
    var selectors = {
    id: $(this),
    item: $(this).find(".timeline-item"),
    activeClass: "timeline-item--active",
    img: ".timeline__img"
  };
  selectors.item.eq(0).addClass(selectors.activeClass);

  var itemLength = selectors.item.length;

  $(window).scroll(function() {
    var max, min;
    var pos = $(this).scrollTop();
    selectors.item.each(function(i) {
      min = $(this).offset().top;
      max = ($(this).height() + $(this).offset().top);
      if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
        selectors.item.removeClass(selectors.activeClass);
        selectors.item.first().addClass(selectors.activeClass);
        selectors.item.last().addClass(selectors.activeClass);
      } else if (pos <= max - 40 && pos >= min) {
        selectors.item.removeClass(selectors.activeClass);
        $(this).addClass(selectors.activeClass);
      }

    });
  });
 }

 $("#timeline-1").timeline();

 })(jQuery);

我已经把下面的jsfiddle放在一起:https://jsfiddle.net/gpzfhwfq/,我在这里试图实现的是,一旦这个时间线上的每个元素都出现在视图中,就会添加一个类。元素是模糊的,当它们进入视野时,模糊几乎应该立即消失,但在上面的琴弦上,元素仍然模糊了相当长的一段时间,当他们已经在视线中。我如何才能使它们变得可见,而不像滚动时进入视口时那样立即模糊?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-23 06:25:10

问题在于定位和"else if“语句。活动类应针对每个项目单独删除,而不是同时删除所有项。我稍微改变了定位:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    } else if (pos <= max && pos >= min - window.innerHeight + $(this).height()/2) {
        $(this).addClass(selectors.activeClass);
    } else{
        $(this).removeClass(selectors.activeClass);
    } 
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46378908

复制
相关文章
【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )
将 <input /> 标签 的 type 属性设置为 button , 就可以将该 表单组件 设置为 普通按钮 类型表单 ;
韩曙亮
2023/03/30
8.2K0
【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )
Html动态点击按钮实现“+”和“-”功能
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/147257.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/01
3.8K0
Html动态点击按钮实现“+”和“-”功能
html.dropdownlistfor_html按钮样式
var parents = _MemberEditDTOService.GetParents();
全栈程序员站长
2022/09/27
4.6K0
gridlayout java_Java GridLayout
GridLayout(int rows, int columns, int hgap, int vgap)
全栈程序员站长
2022/07/01
2920
gridlayout java_Java GridLayout
android gridlayout点击事件,Android GridLayout
当组件需要的空间超出你预期的时候会跑出屏幕或发生重叠因为你不能使用weight等等
全栈程序员站长
2022/08/12
1K0
android gridlayout点击事件,Android GridLayout
GridLayout的使用
GridLayout比FlowLayout多了行和列的设置,也就是说你要先设置GridLayout共有几行几列,就如同二维平面一般,然后你加 进去的组件会先填第一行的格子,然后再从第二行开始填,依此类扒,就像是一个个的格子一般。而且GridLayout会将所填进去组 件的大小设为一样。
全栈程序员站长
2022/07/01
2880
仅使用HTML和CSS的亮暗模式按钮切换
我的目标之一是使每个工具都可以不使用javascript,以一定程度上简化代码,同时也是个挑战。
鲸落c
2022/11/14
4K0
仅使用HTML和CSS的亮暗模式按钮切换
仅使用HTML和CSS的亮暗模式按钮切换
我的目标之一是使每个工具都可以不使用javascript,以一定程度上简化代码,同时也是个挑战。
海拥
2021/08/23
3.3K0
仅使用HTML和CSS的亮暗模式按钮切换
IDEA GridLayout
其中注意GridLayout的声明成MainActivity的成员,不能在成员函数内声明(我在这检查了半天),还有xml中第二个TextView的android:layout_columnSpan=”4”不能省略,不然下面的“LLL”就只有一列。
全栈程序员站长
2022/07/01
3520
IDEA GridLayout
GridLayout详解
GridLayout是一个非常强大的布局管理器,它可以实现很多复杂的布局,名字中暗示它将所有控件放置在类似网格的布局中.^__^GridLayout有两个构造函数.
全栈程序员站长
2022/09/06
6950
gridlayout布局
android layout button encoding 框架 编程
全栈程序员站长
2022/09/05
5620
炫彩流光按钮 CSS + HTML
炫彩流光按钮 写在前面 你若要喜爱你自己的价值,你就得给世界创造价值。——歌德 效果图 三个绝美的样例 HTML代码 <div class="box"> <button clas
小丞同学
2021/08/16
3.8K0
java swt gridlayout_SWT GridLayout使用总结
里面所有方法都是链式调用,设置完GridLayout的参数后,调用applayTo::Composite,为一个Composite设置layout。Composite comp1 = toolkit.createComposite(shell);
全栈程序员站长
2022/09/02
7150
java swt gridlayout_SWT GridLayout使用总结
html点击按钮拨打电话
在进行移动版开发过程中,有时候页面上会留下商家的电话,用户点击电话或者电话旁边的小电话图标即可实现拨打电话的功能,这样省却了用户拨号的麻烦。下面我来介绍一下如何在html页面上点击调出拨打电话功能。
OECOM
2020/07/01
4.3K0
PyQt5--GridLayout
1 # -*- coding:utf-8 -*- 2 ''' 3 Created on Sep 13, 2018 4 5 @author: SaShuangYiBing 6 ''' 7 import sys 8 from PyQt5.QtWidgets import QApplication,QWidget,QPushButton,QGridLayout 9 10 class New_test(QWidget): 11 def __init__(self): 12
py3study
2020/01/19
4960
PyQt5--GridLayout
带有Vagrant和Virtualbox的Elasticsearch集群
模拟分布式存储和计算环境的一种简单方法是将Virtualbox作为VM(“虚拟机”)的提供者,将Vagrant作为配置,启动和停止这些VM的前端脚本引擎。这篇文章的目标是构建一个集群虚拟设备,将Elasticsearch作为可由主机使用/控制的服务提供。可以从Github下载本文中使用的工件。
February
2018/11/26
1.5K0
点击加载更多

相似问题

c#从字节数组创建xml

40

如何从字符串创建字节(数组)?

12

何时在Go中使用[]字节或字符串?

34

从字节数组创建字符串

33

Go,从字节数组中提取天数

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文