javascript - 将css添加到head并使用javascript动态刷新它

Question

我尝试通过 javascript 动态添加 css 规则，然后在滚动事件上更新 css。

这是我的代码:

var head = document.head || document.getElementsByTagName('head')[0],
        createElement = document.createElement('style');
    // append style to head
    head.appendChild(createElement); 

    // scroll event
    $(window).on('scroll touchmove', function(e) {
        // define variables 
        var body = $('body'),
            style = {
                waY: $(document).scrollTop()
            };
        // create css rules
        var css = 'body:before {';
            css += 'background-position: 0px ' + (style.waY*0.4).toFixed(2) + 'px';
            css += '}';
            css += 'body:after {';
            css += 'background-position: 0px ' + (style.waY*0.4).toFixed(2) + 'px';
            css += '}';

        createElement.innerHTML = '';
        // add css rules to style tag
        if (css.styleSheet) {
            // If IE
            createElement.styleSheet.cssText = css;
        } else {
            // Other browsers
            createElement.appendChild(document.createTextNode(css));
        } 
    });

我不喜欢这段代码，因为它会使页面过载并且运行缓慢。如何每次清除样式或只是重载现有规则？

是否有任何其他方法可以在样式中重新加载 css？

Answer 1

这就是您所需要的，它将在运行时更改background-position。

$(window).on('scroll touchmove', function(e) {
    var newposition = ($(document).scrollTop() * 0.4).toFixed(2);
    $('body').css('background-position', '0px ' + newposition + 'px');
});

这是一个 example at jsFiddle .