V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
cc7756789
V2EX  ›  JavaScript

滚动时间,如何判断 scollTop 到一定高度只执行一次

  •  
  •   cc7756789 · 2015-09-26 20:34:55 +08:00 · 3094 次点击
    这是一个创建于 3344 天前的主题,其中的信息可能已经有所发展或是发生改变。

    返回顶部按钮渐进渐出的显示出来,可问题是,如果只执行一次!如果判断大于小于,动一下就来一个事件。不想用 jQuery 等第三方库。

    function progressiveDisplayBack2Top(){
            var needDisp = document.getElementById('back-to-top');
    
            function setProgressive(leftNum, interval, upORdown) {
                if (Boolean(upORdown)) {
                    var leftNum = leftNum + 0.01;
                    if (leftNum > 1) return true;
                    needDisp.style.opacity = leftNum;
                } else {
                    var leftNum = leftNum - 0.01;
                    if (leftNum < 0) return true;
                    needDisp.style.opacity = leftNum;
                }
                setTimeout(function() {
                        setProgressive(leftNum, interval, upORdown);
                    }, interval);
            }
    
            if (document.body.scrollTop > 700){
                setProgressive(0.01, 10, true);
            }
    
            if (document.body.scrollTop < 700){
                setProgressive(1, 10, false);
            }
        }
    
    
        addOnloader(function() {
            addOnScrollEvent(progressiveDisplayBack2Top);
        });
    
    3 条回复    2015-09-26 21:39:49 +08:00
    Septembers
        1
    Septembers  
       2015-09-26 20:59:06 +08:00
    有个概念叫"去抖动"
    lixia625
        2
    lixia625  
       2015-09-26 21:14:23 +08:00 via Android
    最简单的 难道不是一个 boolean 的事?
    emric
        3
    emric  
       2015-09-26 21:39:49 +08:00
    函数节流, 函数去抖. 同时对楼主谴责, 连续提 3 个搜索能够得到答案的问题.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3601 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 10:22 · PVG 18:22 · LAX 02:22 · JFK 05:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.