{"id":162841,"date":"2012-12-17T18:20:02","date_gmt":"2012-12-17T14:20:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=162841"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=162841","title":{"rendered":"\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438 position:fixed<\/span>"},"content":{"rendered":"
\tCSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e position:fixed<\/code> \u0432 Mobile Safari \u0441\u043d\u043e\u0441\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u044f c iOS 5. \u0412 Android \u0440\u043e\u0434\u043d\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b 2.1, \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u043e \u2014 \u0441 2.2, \u043f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u2014 \u0441 3.0. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435: \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 position:fixed<\/code><\/a>. <\/p>\n

HTML: <\/p>\n

<div id="topbar">Fixed Title<\/div> <div id="content"> \t<h2>Start<\/h2> \t<p>Main content text <\/p> \t... \t<p>Main content text <\/p> \t<h2>End<\/h2> <\/div> <div id="bottombar">Fixed footer<\/div> <\/code><\/pre>\n
  CSS:  <\/p>\n
#content{ \tpadding: 50px 0; \/* \u043e\u0442\u0431\u0438\u0432\u0430\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u0431\u0430\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u0432\u0435\u0440\u0445\u0443 \u0438 \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/ } #topbar, #bottombar { \tposition: fixed; \tleft: 0; \twidth:100%; \theight: 50px; \/* \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b *\/ \tline-height:50px; \tbackground:#eee; \ttext-align: center; } #topbar {top: 0;} #bottombar {bottom: 0;}  <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u043c\u0430\u0440\u0442\u0430\u0445 \u0443 \u043d\u0430\u0441 topbar \u0438 bottombar \u00ab\u043f\u0440\u0438\u0431\u0438\u0442\u044b\u00bb \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0432\u0435\u0440\u0445\u0443 \u0438 \u043a \u043d\u0438\u0437\u0443 \u043e\u043a\u043d\u0430. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u0437\u0438\u0446\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u0432 iOS \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043c\u0438\u043d\u0438-Javacript’\u043e\u043c:  <\/p>\n
window.scrollBy(0); <\/code><\/pre>\n
  <\/a>
  \u0414\u043b\u044f \u00ab\u0441\u0442\u0430\u0440\u0438\u0447\u043a\u043e\u0432\u00bb \u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 progressive enhancemen<\/i>.<\/p>\n
  \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 position:fixed;<\/code> \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u0443 \u0441\u043e stackoverflow<\/a> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445:  <\/p>\n
\/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 position: fixed;[start] var isFixedSupported = (function(){ \tvar isSupported = null; \tif (document.createElement) { \t\tvar el = document.createElement("div"); \t\tif (el && el.style) { \t\t\tel.style.position = "fixed"; \t\t\tel.style.top = "10px"; \t\t\tvar root = document.body; \t\t\tif (root && root.appendChild && root.removeChild) { \t\t\t\troot.appendChild(el); \t\t\t\tisSupported = el.offsetTop === 10; \t\t\t\troot.removeChild(el); \t\t\t} \t\t} \t} \treturn isSupported; })();  \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f "\u0441\u0442\u0430\u0440\u0438\u0447\u043a\u043e\u0432" window.onload = function(){ \tif (!isFixedSupported){ \t\tdocument.body.className += ' no-fixed-supported' : ''; \t} \/\/ \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 scroll \twindow.scrollBy(0); } <\/code><\/pre>\n
  \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e CSS:  <\/p>\n
.no-fixed-supported #topbar, .no-fixed-supported #bottombar { position: absolute; } <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 touch \u0438 scroll:  <\/p>\n
\/\/ \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u043c position: fixed; var topbar = document.getElementById('topbar'); var bottombar = document.getElementById('bottombar'); var bottomBarHeight = bottombar.offsetHeight;  var windowHeight = window.innerHeight;  \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f touch \u0438 scroll window.ontouchstart = function(e) { \tif (event.target !== topbar){ \t\ttopbar.style = ""; \t} } window.onscroll = function(){ \tvar scrollTop = window.scrollY; \ttopbar.style.top = scrollTop + 'px'; \tbottombar.style.bottom = (scrollTop + windowHeight - bottomBarHeight) + 'px'; }; <\/code><\/pre>\n
  <\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/b><\/p>\n
\n
<!DOCTYPE html> <html> <head> \t<title>TEST<\/title> \t<style type="text\/css"> \t\t#content{ \t\t\tpadding: 50px 0; \/* \u043e\u0442\u0431\u0438\u0432\u0430\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u0431\u0430\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u0432\u0435\u0440\u0445\u0443 \u0438 \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/ \t\t} \t\t#topbar, \t\t#bottombar { \t\t\tposition: fixed; \t\t\tleft: 0; \t\t\twidth:100%; \t\t\theight: 50px; \/* \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0443 topbar'\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b *\/ \t\t\tline-height:50px; \t\t\tbackground:#eee; \t\t\ttext-align: center; \t\t} \t\t#topbar {top: 0;} \t\t#bottombar {bottom: 0;} \t\t.no-fixed-supported #topbar, \t\t.no-fixed-supported #bottombar { position: absolute; } \t<\/style> <\/head> <body> \t<div id="topbar">Fixed Title<\/div> \t<div id="content"> \t\t<h2>Start<\/h2> \t\t<p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p><p>Main content text<\/p> \t\t<h2>End<\/h2> \t<\/div> \t<div id="bottombar">Fixed footer<\/div>  \t<script type="text\/javascript"> \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 position: fixed;[start] \t\tvar isFixedSupported = (function(){ \t\t\tvar isSupported = null; \t\t\tif (document.createElement) { \t\t\t\tvar el = document.createElement("div"); \t\t\t\tif (el && el.style) { \t\t\t\t\tel.style.position = "fixed"; \t\t\t\t\tel.style.top = "10px"; \t\t\t\t\tvar root = document.body; \t\t\t\t\tif (root && root.appendChild && root.removeChild) { \t\t\t\t\t\troot.appendChild(el); \t\t\t\t\t\tisSupported = (el.offsetTop === 10); \t\t\t\t\t\troot.removeChild(el); \t\t\t\t\t} \t\t\t\t} \t\t\t} \t\t\treturn isSupported; \t\t})(); \t\tvar isFixedSupported = ; \t\twindow.onload = function(){ \t\t\tif (!isFixedSupported){ \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f "\u0441\u0442\u0430\u0440\u0438\u0447\u043a\u043e\u0432" \t\t\t\tdocument.body.className += ' no-fixed-supported'; \/\/ \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u043c position: fixed; \t\t\t\tvar topbar = document.getElementById('topbar'); \t\t\t\tvar bottombar = document.getElementById('bottombar'); \t\t\t\tvar bottomBarHeight = bottombar.offsetHeight; \t\t\t\tvar windowHeight = window.innerHeight; \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f touch \u0438 scroll \t\t\t\twindow.ontouchstart = function(e) { \t\t\t\t\tif (event.target !== topbar){ \t\t\t\t\t\ttopbar.style = ""; \t\t\t\t\t} \t\t\t\t} \t\t\t\twindow.onscroll = function(){ \t\t\t\t\tvar scrollTop = window.scrollY; \t\t\t\t\ttopbar.style.top = scrollTop + 'px'; \t\t\t\t\tbottombar.style.bottom = (scrollTop + windowHeight - bottomBarHeight) + 'px'; \t\t\t\t}; \t\t\t} \/\/ \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 scroll \t\t\twindow.scrollBy(0); \t\t} \t<\/script> <\/body> <\/html> <\/code><\/pre>\n<\/div>\n<\/div>\n
<\/div>\n<\/p><\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/162841\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
   \tCSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e position:fixed<\/code> \u0432 Mobile Safari \u0441\u043d\u043e\u0441\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u044f c iOS 5. \u0412 Android \u0440\u043e\u0434\u043d\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b 2.1, \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u043e \u2014 \u0441 2.2, \u043f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u2014 \u0441 3.0. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435: \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 position:fixed<\/code><\/a>. <\/p>\n
  HTML:  <\/p>\n
<div id="topbar">Fixed Title<\/div> <div id="content"> \t<h2>Start<\/h2> \t<p>Main content text <\/p> \t... \t<p>Main content text <\/p> \t<h2>End<\/h2> <\/div> <div id="bottombar">Fixed footer<\/div> <\/code><\/pre>\n
  CSS:  <\/p>\n
#content{ \tpadding: 50px 0; \/* \u043e\u0442\u0431\u0438\u0432\u0430\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u0431\u0430\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u0432\u0435\u0440\u0445\u0443 \u0438 \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/ } #topbar, #bottombar { \tposition: fixed; \tleft: 0; \twidth:100%; \theight: 50px; \/* \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b *\/ \tline-height:50px; \tbackground:#eee; \ttext-align: center; } #topbar {top: 0;} #bottombar {bottom: 0;}  <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u043c\u0430\u0440\u0442\u0430\u0445 \u0443 \u043d\u0430\u0441 topbar \u0438 bottombar \u00ab\u043f\u0440\u0438\u0431\u0438\u0442\u044b\u00bb \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0432\u0435\u0440\u0445\u0443 \u0438 \u043a \u043d\u0438\u0437\u0443 \u043e\u043a\u043d\u0430. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u0437\u0438\u0446\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u0432 iOS \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043c\u0438\u043d\u0438-Javacript’\u043e\u043c:  <\/p>\n
window.scrollBy(0); <\/code><\/pre>\n
  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-162841","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/162841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=162841"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/162841\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=162841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=162841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=162841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}