javascript - 视差/背景位置的特征检测

好的，所以我已经创建了自己的视差jQuery / JS脚本，但是我只是不知道如何定位支持以下内容的浏览器（需要以下内容）：


支持背景位置转换


我正在尝试的站点（预览）是：
My Test Site

但是，如何检测浏览器是否支持此功能？
我可以基于窗口宽度运行媒体查询吗？
我需要浏览器嗅探吗？
我在WWW上看不到任何有关如何进行特征检测的线索。

任何帮助将不胜感激。

我的JS代码在这里：（请随意使用它）

var goTop = 0;
var thisGoTop = 0;
var thisHeight = 0;
var thisWinH = 0;
var bottomIntrusion = 0;
var thisMax = 0;
var bgPos = 0;

function parallax(){

    goTop = $(window).scrollTop();
    thisWinH = $(window).height();

    $('div.para').each(function(){

        thisGoTop = $(this).offset().top;
        thisHeight = $(this).height();
        thisMax = Math.floor(thisHeight * 0.3);
        bottomIntrusion = (thisGoTop + (thisHeight / 2) - goTop) / thisWinH;

        if (bottomIntrusion > 0) {
            bgPos = 0 - (Math.floor(thisMax * bottomIntrusion));
            $(this).css('background-position','center ' + bgPos + 'px');
        }

    });

}

parallax();

$(window).scroll(function(){

    parallax();

});

编辑：
我研究了Modernizr库，但没有发现任何有关CSS3背景位置转换支持的线索。在这一点上，我真的很接近嗅探，而我不愿意去那里。

最佳答案

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $( document ).ready( function() {
            var Compatibility = function()
            {
                var context = this;

                context.TestObject = function( id )
                {
                    function CreateObject( id )
                    {
                        $('body').prepend('<div id="CompatibilityTestObject_' + id + '"></div>');
                    }

                    // Constructor
                    CreateObject( id );

                    return {
                        GetObject: function( id )
                        {
                            try
                            {
                                // Fetch with raw Javascript so if the javascript method does not exist it will throw an error
                                var fetchedDomElement = document.getElementById( "CompatibilityTestObject_" + id );
                                return fetchedDomElement;
                            }
                            catch( e )
                            {
                                // Failed to fetch DOM Element
                                return false;
                            }
                        },
                        DeleteObject: function( id )
                        {
                            try
                            {
                                $( "#CompatibilityTestObject_" + id ).remove();
                                return true;
                            }
                            catch( e )
                            {
                                // Failed to remove object
                                return false;
                            }
                        }
                    }
                }

                context.Factory = function()
                {
                    return {
                        CreateTestObject: function( id )
                        {
                            var m_TestObject = new context.TestObject( id );
                            return m_TestObject.GetObject( id );
                        },
                        DeleteTestObject: function( id )
                        {
                            return context.DeleteObject( id );
                        }
                    }
                }();

                var CSS = function()
                {
                    return {
                        BackgroundPosition: function()
                        {
                            var testObject = context.Factory.CreateTestObject( "BackgroundPosition" );

                            try
                            {
                                // My first try at testing for background positioning
                                testObject.style.backgroundPosition = "center";
                                return true;
                            }
                            catch( e )
                            {
                                // Implement the handling of this error
                                //alert( "Does not support backgroundPosition: " + e.message );
                                return false;
                            }
                        }
                    }
                }();

                return {
                    CheckCSS: CSS
                }
            }();
        } );
    </script>

复制上面脚本的副本……将其放在您的代码中，然后像这样调用它：

if( Compatibility.CheckCSS.BackgroundPostion() )
{
   // Compatible browser
}
else
{
   // Not compatible
}

关于javascript - 视差/背景位置的特征检测，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20123245/