Question

我正在尝试使此功能仅在屏幕大小超过1024px时才有效。

//Parallax background image
    var velocity = 0.5;
    function update(){ 
        var pos = $(window).scrollTop(); 
        $('.parallax').each(function() { 
            var $element = $(this);
            var height = $element.height();
            $(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px'); 
        });
    };$(window).bind('scroll', update); update();

以下是我试图做的事情：

    //Parallax background image
    var velocity = 0.5;
     $(window).on("ready resize", function() {
   if ($(window).width() < 770) {

    function update(){ 
        var pos = $(window).scrollTop(); 
        $('.parallax').each(function() { 
            var $element = $(this);
            var height = $element.height();
            $(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px'); 
        });
    };});$(window).bind('scroll', update); update();

我真的不知道我做错了什么......

Answer 1

您还没有说明您遇到的问题是什么。如果它是“我的代码不起作用”，那么也许你应该首先检查你的语法。你的大括号搞砸了。

//Initialize velocity and empty update function
var velocity = 0.5;
var update = function () {};

//When window is ready (content loaded) OR resized, execute the following function
$(window).on("ready resize", function () {
    if ($(window).width() >= 1024) { //Check if window width is 1024px wide or larger
        update = function () { //Set update to run this function when executed.
            var pos = $(window).scrollTop(); //Get scrollbar position https://api.jquery.com/scrollTop/

            //For each element with 'parallax' class, execute the following function
            $('.parallax').each(function () {
                var $element = $(this); //Get the current parallax-classed element
                var height = $element.height(); //Save the current height of this element

                //Set the CSS of this parallax-classed element set the background position 
                $(this).css('background-position', '40% + ' + Math.round((height - pos) * velocity) + 'px');
            });
        };
    } else { //Execute if screen width is < 1024px
        update = function () {}; //Set update to do nothing 
    }
});

//When window is scrolled through, run the update function
$(window).bind('scroll', update);
//update();

最后一行是不必要的，因为resize将处理函数值，scroll将处理执行。

您在+设置中遗漏了-或background-position。

例如，如果您的Math.round()的结果为“30”，则Javascript会将该行解释为$(this).css('background-position', '40%30px');，这显然会导致问题。我确定你想要它说 $(this).css('background-position', '40% + 30px'); 。

使功能适用于特定宽度

1 个答案: