如何：動態設置 <BODY> 背景位置？

Question

我以前發布了一個問題，但這個問題已經脫離話題了，我在重新發布我擁有VERIFIED與iPhone兼容的更好的代碼（無論如何我的作品都可以！）

我只想將背景位置坐標應用於body元素，並有條件地為iPhone，iPod和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>   
 "
;} ?>

如何：動態設置 <BODY> 背景位置？

問題描述

1 個解決方案

解決方案1
0 已采納 2011-01-20 02:09:13

如何：動態設置 <BODY> 背景位置？

問題描述

1 個解決方案

解決方案1 0 已采納 2011-01-20 02:09:13

解決方案1
0 已采納 2011-01-20 02:09:13