首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jquery ScrollTop动画百分比不是像素

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

Stack Overflow用户
提问于 2013-07-08 02: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-08 02:57:15

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

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

代码语言:javascript
代码运行次数:0
运行
复制
$(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-08 06:02:42

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

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

代码语言:javascript
代码运行次数:0
运行
复制
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
运行
复制
$(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

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档