Question

让我首先说我不是一个编码器，并且通过使用javascript库和jquery等我的方式几乎摸不着。我发现并且一直在使用classie.js在我的html中为div和元素添加类它们出现在页面上的某个滚动距离处。所以在我的标题中我有很多脚本来添加和删除类...例如：

<script>
function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 100,
            feature = document.querySelector("#welcomediv");
        if (distanceY > shrinkOn) {
            classie.remove(feature,"welcomewish");
        } else {
                classie.add(feature,"welcomewish");    
        }
    });
}
window.onload = init();
</script>
<script>
function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300,
            feature = document.querySelector("#slidetext");
        if (distanceY > shrinkOn) {
            classie.remove(feature,"welcomewish");
        } else {
                classie.add(feature,"welcomewish");    
        }
    });
}
window.onload = init();
</script>
<script>
function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 50,  <?php /*?>130<?php */?>
            feature = document.querySelector("#roundfeatures-panel");
        if (distanceY > shrinkOn) {
            classie.add(feature,"appearnow");
        } else {
            if (classie.has(feature,"appearnow")) {
                classie.remove(feature,"appearnow");
            }
        }
    });
}
window.onload = init();
</script>
<script>
function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 140,
            feature = document.querySelector("#roundfeatures-panel");
        if (distanceY > shrinkOn) {
            classie.add(feature,"expandnow");
        } else {
            if (classie.has(feature,"expandnow")) {
                classie.remove(feature,"expandnow");
            }
        }
    });
}
window.onload = init();
</script>
<script>
function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 1000,
            feature = document.querySelector("#futureevents-panel");
        if (distanceY > shrinkOn) {
            classie.add(feature,"appearnow");
        } else {
            if (classie.has(feature,"appearnow")) {
                classie.remove(feature,"appearnow");
            }
        }
    });
}
window.onload = init();
</script>
<script>
function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 1400,
            feature = document.querySelector("#viewallworkshops");
        if (distanceY > shrinkOn) {
            classie.add(feature,"slideinnow");
        } else {
            if (classie.has(feature,"slideinnow")) {
                classie.remove(feature,"slideinnow");
            }
        }
    });
}
window.onload = init();
</script>
<script>
function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 2250,
            feature = document.querySelector("#subscribe-panel");
        if (distanceY > shrinkOn) {
            classie.add(feature,"appearnow");
        } else {
            if (classie.has(feature,"appearnow")) {
                classie.remove(feature,"appearnow");
            }
        }
    });
}
window.onload = init();
</script>

（......还有更多！如果我按照我的方式，我可能会添加更多，因为我喜欢通过以这种方式添加和删除类来对元素进行处理。但是如果感觉到的话笨重而且很乱，很难维持。）

然后显然我的html元素在页面上。

问题是：

1）标题中的丑陋脚本..有没有一种方法可以以某种方式压缩脚本并保留其目的？

2）每当我添加新元素或将它们从页面中取出时，我必须手动更改与每个实例关联的数字（shrinkOn）。说实话，这变成了一场噩梦。如果我能以某种方式说“当这个元素出现在页面上”或“在页面上出现此元素后100px”而不是说明页面滚动的严格像素数，那会更好。这有可能与经典，或者我需要看另一个选项？

提前感谢，我希望这个问题是合适的。

Answer 1

是的，可以很容易地对代码进行参数化，因为所有的块都在做同样的事情。

要做一系列更新：

var scrollUpdates = [];

添加每个更新的功能（这纯粹是为了方便起见，您可以直接在上面添加它们）：

addScrollUpdate(featureSelector, shrinkOn, className) {
    scrollUpdates.push({
        featureSelector: featureSelector,
        shrinkOn: shrinkOn,
        className: className
    });
}

一个处理程序处理它们：

window.addEventListener('scroll', function(e){
    scrollUpdates.forEach(function(update) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            feature = document.querySelector(update.featureSelector);
        if (distanceY > update.shrinkOn) {
            classie.add(feature, update.className);
        } else {
            if (classie.has(feature, update.className)) {
                classie.remove(feature, update.className);
            }
        }
    });
});

你可以像这样添加每一个：

addScrollUpdate("#welcomediv", 100, "welcomewish");

将所有内容放在一个 window load处理程序中：

window.onload = function() {
    var scrollUpdates = [];

    addScrollUpdate(featureSelector, shrinkOn, className) {
        scrollUpdates.push({
            featureSelector: featureSelector,
            shrinkOn: shrinkOn,
            className: className
        });
    }

    window.addEventListener('scroll', function(e){
        scrollUpdates.forEach(function(update) {
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                feature = document.querySelector(update.featureSelector);
            if (distanceY > update.shrinkOn) {
                classie.add(feature, update.className);
            } else {
                if (classie.has(feature, update.className)) {
                    classie.remove(feature, update.className);
                }
            }
        });
    });

    addScrollUpdate("#welcomediv", 100, "welcomewish");
    addScrollUpdate("#slidetext", 300, "welcomewish");
    // ...and so on...
};

但，我不会使用window load事件，这在页面加载过程中很晚才会发生。相反，我将script标记放在HTML的 end 上，就在结束</body>标记之前，并立即在内联调用的函数中运行它表达式：

(function() {
    // the code here
})();

附注：我不熟悉Classie，但在致电has之前，您可能不需要进行remove测试。

替代或建议更好地使用Classie

1 个答案: