Question

我之前发布的一个问题是关于主题，我正在重新发布更好的代码，我已经验证了与iPhone兼容（无论如何都与我合作！）

我只想将背景位置坐标应用于body元素，并有条件地为iPhone，iPod和＆amp; iPad兼容。这是我对这些设备的条件调用：

var deviceAgent = navigator.userAgent.toLowerCase();  
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);  
   if (agentID) {
      // do something
   } else {
      //do this
   }

现在，我发现这个优秀的脚本在滚动位置的基础上动态设置“top：x”。每个人都告诉我（以及所有的教程和Google搜索结果），由于视口问题，无法动态设置iPhone的滚动位置。但是，他们错了，因为如果你滚动到页面底部并在iPhone上查看这个javascript演示，你可以滚动和

<div style="background-position: fixed; top: x (variable)"></div>

div保持以iPhone为中心。我真的希望这个问题可以帮助很多人，我认为这是不可能的，但它不是......我只是需要帮助将它拼接在一起！

原始代码（您可以在iPhone上自行测试）在这里： http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/

**编辑：作为参考，这里是通过动态应用“top：x”元素来做绝对位置的div（即使在iPhone上）：

http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/ **

所以我需要帮助获取以下代码以将动态“background-position：0 x”应用于BODY标记，其中x居中且相对于视口位置。此外，需要嵌套在上述代码中，这些代码适用于iPhone和类似设备。

// Page Size and View Port Dimension Tools
// http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/
if (!sb_windowTools) { var sb_windowTools = new Object(); };

sb_windowTools = {
    scrollBarPadding: 17, // padding to assume for scroll bars

    // EXAMPLE METHODS

    // center an element in the viewport
    centerElementOnScreen: function(element) {
        var pageDimensions = this.updateDimensions();
        element.style.top = ((this.pageDimensions.verticalOffset() + this.pageDimensions.windowHeight() / 2) - (this.scrollBarPadding + element.offsetHeight / 2)) + 'px';
        element.style.left = ((this.pageDimensions.windowWidth() / 2) - (this.scrollBarPadding + element.offsetWidth / 2)) + 'px';
        element.style.position = 'absolute';
    },

    // INFORMATION GETTERS

    // load the page size, view port position and vertical scroll offset
    updateDimensions: function() {
        this.updatePageSize();
        this.updateWindowSize();
        this.updateScrollOffset();
    },

    // load page size information
    updatePageSize: function() {
        // document dimensions
        var viewportWidth, viewportHeight;
        if (window.innerHeight && window.scrollMaxY) {
            viewportWidth = document.body.scrollWidth;
            viewportHeight = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight) {
            // all but explorer mac
            viewportWidth = document.body.scrollWidth;
            viewportHeight = document.body.scrollHeight;
        } else {
            // explorer mac...would also work in explorer 6 strict, mozilla and safari
            viewportWidth = document.body.offsetWidth;
            viewportHeight = document.body.offsetHeight;
        };
        this.pageSize = {
            viewportWidth: viewportWidth,
            viewportHeight: viewportHeight
        };
    },

    // load window size information
    updateWindowSize: function() {
        // view port dimensions
        var windowWidth, windowHeight;
        if (self.innerHeight) {
            // all except explorer
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            // explorer 6 strict mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) {
            // other explorers
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        };
        this.windowSize = {
            windowWidth: windowWidth,
            windowHeight: windowHeight
        };
    },

    // load scroll offset information
    updateScrollOffset: function() {
        // viewport vertical scroll offset
        var horizontalOffset, verticalOffset;
        if (self.pageYOffset) {
            horizontalOffset = self.pageXOffset;
            verticalOffset = self.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {
            // Explorer 6 Strict
            horizontalOffset = document.documentElement.scrollLeft;
            verticalOffset = document.documentElement.scrollTop;
        } else if (document.body) {
            // all other Explorers
            horizontalOffset = document.body.scrollLeft;
            verticalOffset = document.body.scrollTop;
        };
        this.scrollOffset = {
            horizontalOffset: horizontalOffset,
            verticalOffset: verticalOffset
        };
    },

    // INFORMATION CONTAINERS

    // raw data containers
    pageSize: {},
    windowSize: {},
    scrollOffset: {},

    // combined dimensions object with bounding logic
    pageDimensions: {
        pageWidth: function() {
            return sb_windowTools.pageSize.viewportWidth > sb_windowTools.windowSize.windowWidth ?
                sb_windowTools.pageSize.viewportWidth :
                sb_windowTools.windowSize.windowWidth;
        },
        pageHeight: function() {
            return sb_windowTools.pageSize.viewportHeight > sb_windowTools.windowSize.windowHeight ?
                sb_windowTools.pageSize.viewportHeight :
                sb_windowTools.windowSize.windowHeight;
        },
        windowWidth: function() {
            return sb_windowTools.windowSize.windowWidth;
        },
        windowHeight: function() {
            return sb_windowTools.windowSize.windowHeight;
        },
        horizontalOffset: function() {
            return sb_windowTools.scrollOffset.horizontalOffset;
        },
        verticalOffset: function() {
            return sb_windowTools.scrollOffset.verticalOffset;
        }
    }
};

Answer 1

 <?php

/* detect Mobile Safari */

$browserAsString = $_SERVER['HTTP_USER_AGENT'];

if (strstr($browserAsString, " AppleWebKit/") && strstr($browserAsString, " Mobile/"))
{
    $browserIsMobileSafari = true;

 echo 
 " 
 <script>
 $(document).ready(function() {
  $(window).scroll(function() {
   windowPosition = $(this).scrollTop();
   $('body').stop().animate({'backgroundPositionY' : windowPosition+'px'}, 500);
  });
 });

 </script>   
 "
;} ?>

如何：动态设置背景位置？

1 个答案: