Question

我编写了一个函数，它将容器的偏移量与滚动时的窗口滚动条进行比较，并在容器为＆＃34; X＆＃34;视口顶部的像素数量。现在，该功能特定于一个容器。我在页面上有另一个容器，我想运行相同的函数，但是jquery / javascript相当新，无法找到重构重用的方法。

$(function(){
    // Get the offset of container and compare it to $(window).scrollTop
    var cont = $('.intro__skills-cont');
    var contPos = cont.offset().top;
    var windowPos = $(window).scrollTop();
    // Hide skillsContainer
    cont.addClass('is-hidden');

    $(window).scroll(function(event){
        windowPos = $(this).scrollTop();

        if(windowPos > contPos - 250) {
            cont.removeClass('.is-hidden');
            cont.addClass('is-fading-up');
        }

    }); // end window scroll

});

这是我目前的HTML结构我希望能够在

上运行功能

    <div class="intro__skills-cont">
        <div class="intro__skills-design">
            <svg><use xlink:href="#shape-design" /></svg>
            <h3 class="intro__skills-title">Design</h3>
            <p class="intro__skills-sum">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fugit illo pariatur ad dicta mollitia nulla provident repellendus doloribus at quam veniam cumque vitae neque, cupiditate, iusto, accusamus, tenetur perferendis.</p>
        </div>
        <div class="intro__skills-dev">
            <svg><use xlink:href="#shape-dev" /></svg>
            <h3 class="intro__skills-title">Development</h3>
            <p class="intro__skills-sum">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fugit illo pariatur ad dicta mollitia nulla provident repellendus doloribus at quam veniam cumque vitae neque, cupiditate, iusto, accusamus, tenetur perferendis.</p>
        </div>
    </div>
</div>
<div class="portfolio">
    <h2 class="intro__title">Portfolio</h2>
    <div class="portfolio__gallery">
    </div>
</div>

我知道这似乎是我要求免费工作，但实际上只是想要朝着正确的方向努力。

这是我最近的尝试，但它在contPos上出错了任何帮助是极大的赞赏。干杯！

function fadeUp(containerClass) {
    var cont = "$('." + containerClass + "')";
    var contPos = cont.offset().top;
    var windowPos = $(window).scrollTop();

    cont.addClass('is-hidden');

    $(window).scroll(function(event){
        windowPos = $(this).scrollTop();
        if(windowPos > contPos - 250) {
            cont.removeClass('.is-hidden');
            cont.addClass('is-fading-up');
        }
    });


}

fadeUp('intro__skils-cont');

Answer 1

我建议你编写一个函数来获取一个jQuery对象。然后你可以在调用它时使用你想要的任何选择器。此外，您应该编写它来处理多个元素。您可以使用.each()。

function fadeUp($elements) {
    $elements.each(function() {
        var $element = $(this),
            elementPos = $element.offset().top;
        $element.addClass('is-hidden');
        $(window).scroll(function() {
            if ($(this).scrollTop() > (elementPos - 250)) {
                $element.removeClass('is-hidden');
                $element.addClass('is-fading-up');
            }
        });
    });
}

然后你可以这样打电话：

fadeUp($('.intro__skills-cont'));
fadeUp($('.intro__skills-dev'));

或者这个：

fadeUp($('.intro__skills-cont, .intro__skills-dev'));

或者在所有容器上放置一个“容器”类，然后使用;

fadeUp($('.container'));

Answer 2

您的问题是var cont = "$('." + containerClass + "')";行。您希望将定位器传递给$()，而不是创建字符串"$(intro__skills-cont)"。

您可以尝试类似

的内容

function fadeUp(container) {   
    var cont = $(container);
    //...
}

fadeUp('.intro__skills-cont');

你会注意到我没有将'.'添加到定位器之前。这样做的好处是允许您传入DOM对象以及jQuery定位器。

Answer 3

有几种方法可以做到根据您当前的fadeUp函数

function fadeUp(containerClass) {
    var cont = $('.'+containerClass);
    var contPos = cont.offset().top;
    var windowPos = $(window).scrollTop();

    cont.addClass('is-hidden');

    $(window).scroll(function(event){
        windowPos = $(this).scrollTop();
        if(windowPos > contPos - 250) {
            cont.removeClass('.is-hidden');
            cont.addClass('is-fading-up');
        }
    });
}

重构Jquery函数是可重用的

3 个答案: