JavaScript 消除了我网页的静态背景

Question

编辑:我当前用于index.html = https://pastebin.com/embed_js/8Lisq2jH的HTML

我用了https://html5up.net/overflow作为我的网站的模板。 它包含名为“jquery.scrollly.min.js”的 JavaScript 文件，该文件正在更改我的 css 方向。 我知道这一点是因为当我删除该文件时......背景是静态的， 这就是我想要的(“静态”=背景始终处于相同位置)。

问题是，上面的 .js 文件还做了我需要的其他事情，所以我无法删除它。 下面，我将首先包含 .js 文件，然后包含背景的 css 代码。

JavaScript 强制背景滚动(非静态):

(function(e) {
    function u(s, o) {
        var u, a, f;
        if ((u = e(s))[t] == 0) return n;
        a = u[i]()[r];
        switch (o.anchor) {
            case "middle":
                f = a - (e(window).height() - u.outerHeight()) / 2;
                break;
            default:
            case r:
                f = Math.max(a, 0)
        }
        return typeof o[i] == "function" ? f -= o[i]() : f -= o[i], f
    }
    var t = "length",
        n = null,
        r = "top",
        i = "offset",
        s = "click.scrolly",
        o = e(window);
    e.fn.scrolly = function(i) {
        var o, a, f, l, c = e(this);
        if (this[t] == 0) return c;
        if (this[t] > 1) {
            for (o = 0; o < this[t]; o++) e(this[o]).scrolly(i);
            return c
        }
        l = n, f = c.attr("href");
        if (f.charAt(0) != "#" || f[t] < 2) return c;
        a = jQuery.extend({
                anchor: r,
                easing: "swing",
                offset: 0,
                parent: e("body,html"),
                pollOnce: !1,
                speed: 1e3
            },
            i), a.pollOnce && (l = u(f, a)), c.off(s).on(s, function(e) {
            var t = l !== n ? l : u(f, a);
            t !== n && (e.preventDefault(), a.parent.stop().animate({
                scrollTop: t
            }, a.speed, a.easing))
        })
    }
})(jQuery);

定义静态背景的 CSS 规则:

background-color: #2e2e2e;
background-image: url("images/overlay.png");
background-size: 100% 100%;
background-attachment: fixed, fixed;
background-position: center, center;

如果您能帮助我维护 css 和其余 .js 功能，我将非常感激。该网站是一个献给我父亲的照片库。我是一名初学者，感觉这超出了我的薪资等级。

谢谢!

Answer 1

编辑:看到 HTML 后，JS 正在更改滚动的背景位置。您可以添加!important到你的 CSS 中的位置，这应该可以工作。另外，您需要删除 <!-- HEADER -->在文档的顶部。第一件事应该是DOCTYPE声明。

此外，您的 CSS 格式错误，您不需要在附件或位置中使用逗号。而你只需要一个fixed ，不是两个。您或许还可以更改您的 background-size至cover而不是100% 100% .

background-color: #2e2e2e;
background-image: url("images/overlay.png");
background-size: 100% 100%;
background-attachment: fixed !important;
background-position: center center !important;

你的CSS中还有这个:

body.is-scroll {
            background-attachment: scroll, scroll;
            background-size: auto, 100% auto;
        }

您可以更改 scrolls至fixed并将背景大小设置为 100% 100%或cover

编辑:如果上述内容无法解决您的问题，Bobby Speirs 的新评论要点、HTML 和更多信息将会有所帮助。