Question

编辑：我目前正用于index.html = https://pastebin.com/embed_js/8Lisq2jH

的HTML

我使用https://html5up.net/overflow作为我网站的模板。它包含名为“jquery.scrolly.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中的位置，这应该有效。此外，您需要删除文档顶部的。首先应该是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和一些更多信息将有助于上述事件无法解决您的问题。

JavaScript淘汰了我的网页的静态背景

1 个答案: