Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jquery ScrollTop动画百分比不是像素

jquery ScrollTop动画百分比不是像素
EN

Stack Overflow用户
提问于 2013-07-07 18:37:26
回答 2查看 2.3K关注 0票数 0

首先,我想说我是jQuery的新手。当用户滚动到这个位置时,我使用这个脚本来动画两个div的背景色。第一个div运行良好,但#contact无法工作,因为#contact从顶部定位为500%,所以当我向下滚动500像素时,动画就会触发。我不知道如何将其从像素更改为百分比。

我只在java的颜色部分和最新版本的jQuery中使用它。

另外,我知道这是另一个问题,但有什么方法,一旦你滚动的div返回到它的原始状态,如果用户卷动回来,动画将再次启动?

JS小提琴 http://jsfiddle.net/8SWG4/

$(窗口).scroll(函数(){) 如果($(窗口).scrollTop()> 500){ $("#contact").stop().animate({ backgroundColor:'#fff',},1000);}{${$(“约”).stop().animate({ backgroundColor:'#000',},1000);};};

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-07-07 18:57:15

可以使用$(element).offset().top检测到该元素的滚动传递。

示例演示:http://jsfiddle.net/yeyene/8SWG4/6/

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(window).scroll(function() { 
    if($(this).scrollTop() >= $("#blog").offset().top){
        $("#contact").stop().animate({
          backgroundColor:  '#000',
        }, 2000);
    }
    if($(this).scrollTop() <= $("#blog").offset().top){
        $("#contact").stop().animate({
          backgroundColor:  '#fff',
        }, 2000);
    }
    if($(this).scrollTop() >= $("#home").offset().top/2){
        $("#about").stop().animate({
          backgroundColor:  '#000',
        }, 2000);     
    }
    if($(this).scrollTop() <= $("#home").offset().top/2){
        $("#about").stop().animate({
          backgroundColor:  '#fff',
        }, 2000);     
    }
});
票数 2
EN

Stack Overflow用户

发布于 2013-07-07 22:02:42

500%的屏幕外,将无法工作。你是说50%还是?你怎么把高度传给你的div?

无论如何,不能直接在%上触发滚动高度,但可以这样做:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var a = $(document).height();
var a3= Math.floor(a * 0.3);  // 30% 
var a5= Math.floor(a * 0.5);  // 50%
var a8= Math.floor(a * 0.8);  // 80%

我使用了$(document).height();,但是如果您有一个包装器div,您也可以使用它,比如$('#div_id').height();

要让动画“重新启动”,当用户回滚时,检查here。你也可以做叶烯的建议,使用$(element).offset().top

我将您的另一个问题中的代码修改为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(window).scroll(function () {
    a = b = c = false;
    console.log($(window).scrollTop());
    if ($(window).scrollTop() > 0 && $(window).scrollTop() < 400) {
        a = true;
    }
    if ($(window).scrollTop() > 399 && $(window).scrollTop() < 900) {
        b = true;
    }
    if ($(window).scrollTop() > 899 ) {
        c = true;
    }
    $("#home").stop().animate({
        backgroundColor: a ? '#00f' : '#fff',
    }, 1000);
    $("#about").stop().animate({
        backgroundColor: b ? '#0f0' : '#fff',
    }, 1000);
    $("#contact").stop().animate({
        backgroundColor: c ? '#f00' : '#fff',
    }, 1000);
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17518468

复制
相关文章
jq 判断是否为空,为空隐藏指定 div
<style>.mydiv{ width:300px; height:300px; background:red;}</style> <div class="mydiv">     <div class="content">          这是一句话,删除的话会让 mydiv display:none;          </div> </div> <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script> <sc
Savalone
2020/02/11
7.1K0
python判断是否为空_python 判断对象是否为空
在实际的工作当中,我们难免要与空值打交道,相信不少初学者都会写出下面的代码:if a is None:
全栈程序员站长
2022/07/01
10.5K0
java判断空对象为空_Java判断对象是否为空(包括null ,””)的方法[通俗易懂]
public static boolean isEmpty(Object obj)
全栈程序员站长
2022/06/25
7K0
java如何判断对象为空_java对象如何判断是否为空
在实际书写代码的时候,经常会因为对象为空,而抛出空指针异常java.lang.NullPointerException。
全栈程序员站长
2022/06/25
13.4K0
java如何判断对象为空_java对象如何判断是否为空
JavaScript中为空判断
摘要总结:本文介绍了JavaScript中为空判断的不同情况,包括判断字符串是否为空、变量是否被定义和初始化过。通过这些判断,可以帮助开发人员编写更加健壮的代码。
林老师带你学编程
2018/01/03
3.9K0
Java Optional 初始为空
Optional<QualificationStateLabelInfo> stateSpecificLabel = null;
HoneyMoose
2022/05/18
2.7K0
Java Optional 初始为空
java判断list为空
if(null == list || list.size() ==0 ){ }
似水的流年
2018/01/12
4.8K0
as3中ProgressEvent的bytesTotal始终为0
遇到很奇怪的问题,as3中监听资源下载的PROGRESS事件(ProgressEvent.PROGRESS),它的bytesLoaded属性倒是正常的,但bytesTotal属性却始终为0,结果是导致了得到的下载比率为无穷大(Infinity)
meteoric
2018/11/15
8950
UrlReferrer为空的问题?
官方解释:获取有关客户端上次请求的 URL 的信息,该请求链接到当前的 URL。 1.也就是说,如果用Request.Redirect之后,再用Request.UrlReferrer是得不到前一个页面的链接的,因为这不是客户端的请求。 2.既然服务端不行,那换个思路:在客户端用js导航如何?比如下面这样 A.aspx上用window.location='B.aspx' 但实践证明在B.aspx上用Request.UrlReferrer仍然为空,即js导航也不行! 3.用A链接试一下 A.aspx上写一段ht
菩提树下的杨过
2018/01/23
2.4K0
java判断list为空
if(null == list || list.size() ==0 ){ } list.isEmpty()和list.size()==0 没有区别 isEmpty()判断有没有元素 而
似水的流年
2018/01/18
3.6K0
java判断list为空
if(null == list || list.size() ==0 ){ } list.isEmpty()和list.size()==0 没有区别 isEmpty()判断有没有元素 而size()返
似水的流年
2019/12/10
3.5K0
jdbctemplate查询为空报错_java空指针异常举例
Dao类是不能直接new出来的必须是通过 ApplicationContext applicationContext= new
全栈程序员站长
2022/11/17
3.1K0
使用“空”对象替代引用是否为空判断
使用Null对象替代引用是否为空判断 编程语言中最常见运行时异常非NullPointerException莫属,只要程序依赖于外部的输入数据,比如说http请求传递的查询字符串参数、关系数据库连接、磁盘文件读取,空引用异常就无法避免。通常,程序需要满足某些条件才能正常的往下执行,假如这些条件依赖外部输入数据,而这些外部输入的数据肯定无法保证百分百不出错,比如说网络连接失败、数据库用户名密码错误等,当程序被这些节外生枝的障碍打断时,空引用异常就极有可能被引发。 比如说,原本我们调用一个方法,这个方法会执行连接
用户1608022
2018/04/11
7.6K0
java怎么判断对象为空_java中怎么判断对象是否为空
一种是org.apache.commons.lang3包下的;另一种是org.springframework.util包下的。
全栈程序员站长
2022/06/28
6.8K0
java怎么判断对象为空_java中怎么判断对象是否为空
@NacosInjected private NamingService namingService 为空
发布者:全栈程序员栈长,转转请注明出处:https://javaforall.cn/2185.html原文链接:
全栈程序员站长
2021/04/07
2.3K0
什么?字符串为空?
当字符串为null,undefined,NaN,0,false,""这几个时,if(value)的结果都为false,if(!value)包含了我们常见的空值情况,如果你想要简便的方式,便可以使用它
说故事的五公子
2020/07/21
1.6K0
PHP 检测变量是否为空
注意:字符串"0.0"、字符串"00"、包括一个空格字符的字符串" "、字符串"false" 、整型 -1 都不为 false:
德顺
2019/11/13
7.2K0
java 对象为空判断_java中判断对象是否为空的方法
首先,直接使用 object == null 去判断,对象为null的时候返回true,不为null的时候返回false。然后,在object != null 为true的情况下,进一步去判断对象的所有属性是否为null。
全栈程序员站长
2022/08/15
11.5K0
java 对象为空判断_java中判断对象是否为空的方法
js判断map是否为空
补记:后台传递过来的是map集合,dataType返回值类型应该是json类型,此时,可以直接使用:JSON.parse(data);这样得到的结果是object类型,然后我们直接判断它的长度即可。
全栈程序员站长
2022/09/07
15.2K0
vue判断map是否为空
for in 循环判断 var obj = {}; var b = function() { for(var key in obj) { return false; } return true; } alert(b());//true
全栈程序员站长
2022/09/07
4.2K0

相似问题

XML节点始终为空

20

Webhook XML始终为空

114

C# XML值始终为空

52

Xml按钮字段值始终为空。

30

Express JS发送数组始终为空。

22
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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