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

Feature detection for parallax / background-position

本文关键字：特征检测位置背景视差更新时间：2023-09-26

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

支持背景位置的转换

我正在尝试的网站（预览）是：我的测试站点

但是，我如何检测浏览器是否支持此功能？我可以根据窗口宽度运行媒体查询吗？我必须浏览嗅探吗？我在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的背景位置转换支持的线索。在这一点上，我真的很接近brower嗅探，我不想去那里。

    <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
}