{"id":36692,"date":"2022-06-28T18:45:53","date_gmt":"2022-06-28T09:45:53","guid":{"rendered":"https:\/\/webst8.com\/code\/?p=36692"},"modified":"2024-08-01T12:33:37","modified_gmt":"2024-08-01T03:33:37","slug":"css-position-sticky","status":"publish","type":"post","link":"https:\/\/webst8.com\/code\/css-position-sticky\/","title":{"rendered":"CSS position:sticky\u306e\u4f7f\u3044\u65b9\u3068\u52d5\u304b\u306a\u3044\u6642\u306e\u5bfe\u51e6\u6cd5"},"content":{"rendered":"

position:sticky\u3092\u5229\u7528\u3059\u308b\u3068\u3001javascript\u306a\u3057\u3067\u3001\u8868\u30c6\u30fc\u30d6\u30eb\u3084\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u7279\u5b9a\u8981\u7d20\u306e\u4f4d\u7f6e\u3092\u9014\u4e2d\u3067\u56fa\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n

\"position:<\/span><\/p>\n

    <header>Header<\/header>\r\n    <div class=\"container\">\r\n      <div class=\"flex-wrap\">\r\n        <main>Main Contents<\/main>\r\n        <aside>\r\n          <div class=\"sidebar-element se1\">\u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d201<\/div>\r\n          <div class=\"sidebar-element se2\">\u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d202<\/div>\r\n          <div class=\"sidebar-element se3\">\u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d203<\/div>\r\n        <\/aside>\r\n      <\/div>\r\n    <\/div><\/pre>\n
body { text-align: center; }\r\n.container {\r\n  width: 1000px;\r\n  margin: 0 auto;\r\n}\r\n \r\nheader {\r\n  background-color: pink;\r\n  line-height: 80px;\r\n  margin-bottom: 60px;\r\n}\r\n.flex-wrap {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\nmain {\r\n  background-color: bisque;\r\n  line-height: 2000px;\r\n  width: calc(60% - 30px);\r\n}\r\naside { width: calc(40% - 30px); }\r\n.sidebar-element{\r\n  line-height: 300px;\r\n  margin-bottom: 30px;\r\n}\r\n.se1{ background-color: rgb(198, 229, 255); }\r\n \r\n.se2{ background-color: rgb(172, 214, 251); }\r\n \r\n.se3{\r\n  background-color: rgb(129, 192, 247);\r\n  position: sticky;\r\n  top: 0;\r\n}<\/pre>\n
\u4eca\u56de\u306fposition: sticky\u306e\u4f7f\u3044\u65b9<\/strong>\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n
 <\/p>\n
\n
SNS\u30d5\u30a9\u30ed\u30fc\u3088\u308d\u3057\u304f\u304a\u9858\u3044\u3057\u307e\u3059\uff01<\/p>\n
\u65b0\u3057\u3044\u30b3\u30f3\u30c6\u30f3\u30c4\u3084\u3001\u3088\u308a\u8a73\u7d30\u306a\u89e3\u8aac\u3092\u52d5\u753b\u3084\u30b7\u30e7\u30fc\u30c8\u52d5\u753b\u3067\u304a\u5c4a\u3051\u3057\u3066\u3044\u307e\u3059\u3002\u65e5\u3005\u306e\u60c5\u5831\u53ce\u96c6\u306b\u304a\u5f79\u7acb\u3066\u304f\u3060\u3055\u3044\u3002<\/span><\/div>\n
\"\"<\/a><\/div>\n
\"\"<\/a>
\n\"\"<\/a>
\n\"\"<\/a><\/div>\n<\/div>\n<\/p>\n
 
\n\u203b\u672c\u8a18\u4e8b\u3067\u306fposition\u30d7\u30ed\u30d1\u30c6\u30a3\u306estatic\u30fbrelative\u30fbabsolute\u30fbfixed\u306e\u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u3066\u3044\u307e\u305b\u3093\u3002\u3053\u308c\u3089\u306b\u3064\u3044\u3066\u306f\u3010\u521d\u5fc3\u8005\u5411\u3051\u3011CSS position\u3067\u4f4d\u7f6e\u6307\u5b9a\u3067\u3059\u308b\u65b9\u6cd5\u30fb\u4f7f\u3044\u65b9<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/span><\/p>\n
 <\/p>\n
position: sticky\u3068\u306f\uff1f\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/h2>\n
\u4f4d\u7f6e\u3092\u56fa\u5b9a\u3055\u305b\u305f\u3044\u8981\u7d20\u306b\u5bfe\u3057\u3066\u300cposition: sticky\u300d\u3092\u6307\u5b9a\u3057\u3001\u7e26\u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306e\u5834\u5408\u306ftop\u3084bottom<\/strong>\u3001\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306e\u5834\u5408\u306fleft\u3084right<\/strong>\u3068\u3044\u3063\u305f\u4f4d\u7f6e\u6307\u5b9a\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\n <\/p>\n
\n
\u25a0position: sticky\u306e\u4f7f\u3044\u65b9<\/p>\n
    \n
  1. \u56fa\u5b9a\u3055\u305b\u305f\u3044\u8981\u7d20\u306b\u5bfe\u3057\u3066\u300cposition: sticky\u300d\u3092\u6307\u5b9a\u3059\u308b<\/li>\n
  2. \u7e26\u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306e\u5834\u5408\u306ftop\u3084bottom\u3001\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306e\u5834\u5408\u306fleft\u3084right\u306a\u3069\u306e\u4f4d\u7f6e\u6307\u5b9a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3059\u308b<\/li>\n<\/ol>\n<\/div>\n
     <\/p>\n
    \u305f\u3068\u3048\u3070\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7e26\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u753b\u9762\u306e\u9014\u4e2d\u304b\u3089\u8981\u7d20\u3092\u30a6\u30a3\u30f3\u30c9\u30a6\u4e0a\u306b\u304f\u3063\u3064\u3051\u305f\u308a<\/strong>\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \"position:<\/span>
    \n <\/p>\n
    \u306a\u304asticky\u304c\u6307\u5b9a\u3055\u308c\u305f\u8981\u7d20\u306e\u3053\u3068\u3092\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u3001\u305d\u306e\u89aa\u8981\u7d20\u306e\u3053\u3068\u3092\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30b3\u30f3\u30c6\u30ca\u3068\u547c\u3073\u307e\u3059\u3002<\/p>\n
    <aside> \/* \u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30b3\u30f3\u30c6\u30ca *\/\r\n  <div class=\"sidebar-element se1\">\r\n    \u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d201\r\n  <\/div>\r\n  <div class=\"sidebar-element se2\">\r\n    \u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d202\r\n  <\/div>\r\n  <div class=\"sidebar-element se3\"> \/* \u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0 *\/\r\n    \u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d203\r\n  <\/div>\r\n<\/aside><br><\/pre>\n
    .se3 {\r\n  position: sticky;\r\n  top: 0px;\r\n  background-color: rgb(84, 175, 255); \r\n}<\/pre>\n
    \"\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u3068\u30b3\u30f3\u30c6\u30ca\u3092\u89e3\u8aac\u3057\u305f\u56f3\"<\/span>
    \n <\/p>\n
    \n\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t
    \n\t\t\t
    \u4e0a\u306e\u4f8b\u3067\u306f\u300c\u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d203\u300d\u3068\u66f8\u304b\u308c\u305fdiv\u30bf\u30b0\u304c\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u3001\u5168\u4f53\u3092\u56f2\u3063\u3066\u3044\u308baside\u30bf\u30b0\u304c\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30b3\u30f3\u30c6\u30ca\u3068\u306a\u308a\u307e\u3059\u3002<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>
    \n <\/p>\n
    \u306a\u304a\u3001position: sticky\u306e\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u72b6\u6cc1\u3067\u3059\u304c\u3001\u3059\u3067\u306b\u30b5\u30dd\u30fc\u30c8\u7d42\u4e86\u3057\u305fIE\u3092\u9664\u304f\u307b\u3068\u3093\u3069\u306e\u4e3b\u8981\u30d6\u30e9\u30a6\u30b6\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u5b89\u5fc3\u3057\u3066\u5229\u7528\u3067\u304d\u307e\u3059\u3002
    \n
    \"position:
    caniuse.com\/<\/a>\u3088\u308a\u5f15\u7528<\/p><\/div>
    \n <\/p>\n
    + position: sticky\u3092\u4f7f\u3063\u3066\u4e0a\u90e8\u306b\u3042\u308b\u8981\u7d20\u3092\u56fa\u5b9a\u3055\u305b\u305f\u4f8b<\/span><\/p>

    \n\"\u300cse1\u300d\u3068\u3044\u3046\u30af\u30e9\u30b9\u540d\u3092\u6301\u3064div\u30bf\u30b0\u304c\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u3001\u305d\u306e\u89aa\u8981\u7d20\u3067\u3042\u308baside\u30bf\u30b0\u304c\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30b3\u30f3\u30c6\u30ca\"<\/span>
    \n <\/p>\n
    \"position:<\/span><\/p>\n
    \n\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t
    \n\t\t\t
    \u4e0a\u306e\u4f8b\u3067\u306f\u300cse1\u300d\u3068\u3044\u3046\u30af\u30e9\u30b9\u540d\u3092\u6301\u3064div\u30bf\u30b0\u306b\u5bfe\u3057\u3066\u300cposition: sticky\u300d\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u70ba\u3001\u3053\u3061\u3089\u304c\u300c\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u300d\u305d\u306e\u89aa\u8981\u7d20\u3067\u3042\u308baside\u30bf\u30b0\u304c\u300c\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30b3\u30f3\u30c6\u30ca\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n
    <body>\r\n  <header>Header<\/header>\r\n\r\n  <div class=\"container\">\r\n    <div class=\"flex-wrap\">\r\n      <main>Main Contents<\/main>\r\n      <aside>\r\n        <div class=\"sidebar-element se1\">\u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d201<\/div>\r\n        <div class=\"sidebar-element se2\">\u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d202<\/div>\r\n        <div class=\"sidebar-element se3\">\u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d203<\/div>\r\n      <\/aside>\r\n    <\/div>\r\n  <\/div>\r\n<\/body><\/pre>\n
    body {\r\n  text-align: center;\r\n}\r\n\r\n.container {\r\n  width: 1000px;\r\n  margin: 0 auto;\r\n}\r\n\r\nheader {\r\n  background-color: pink;\r\n  line-height: 80px;\r\n  margin-bottom: 60px;\r\n}\r\n\r\n.flex-wrap {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\nmain {\r\n  background-color: bisque;\r\n  line-height: 2000px;\r\n  width: calc(60% - 30px);\r\n}\r\n\r\naside {\r\n  width: calc(40% - 30px);\r\n}\r\n\r\n.sidebar-element{\r\n  line-height: 300px;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.se1{\r\n  background-color: rgb(198, 229, 255);\r\n  position: sticky;\r\n  top: 0;\r\n}\r\n\r\n.se2{\r\n  background-color: rgb(172, 214, 251);\r\n}\r\n\r\n.se3{\r\n  background-color: rgb(129, 192, 247);\r\n}<\/pre>\n
    \u3053\u308c\u3067\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0(\u30b5\u30a4\u30c9\u30d0\u30fc\u8981\u7d201)\u304c\u30b9\u30af\u30ea\u30fc\u30f3\u306e\u4e0a\u90e8(top:0)\u306b\u5230\u9054\u3057\u305f\u6642\u3001\u3053\u3061\u3089\u304c\u30b9\u30af\u30ea\u30fc\u30f3\u4e0a\u306b\u56fa\u5b9a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002
    \n<\/div><\/div>\n
    + position: sticky\u3092\u4f7f\u3063\u3066\u4e0b\u90e8\u306b\u8981\u7d20\u3092\u56fa\u5b9a\u3055\u305b\u3066\u3044\u308b\u4f8b<\/span><\/p>

    \n\u30b5\u30a4\u30c9\u30d0\u30fc3\u8981\u7d20\u306b\u300cposition: sticky\u300d\u300cbottom: 0\u300d\u3092\u6307\u5b9a\u3057\u3066\u3042\u3052\u308b\u3068\u3001\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u304c\u30b9\u30af\u30ea\u30fc\u30f3\u306e\u4e0b\u90e8(bottom:0)\u306b\u5230\u9054\u3057\u305f\u6642\u3001\u56fa\u5b9a\u3055\u308c\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
    .se1{\r\n  background-color: rgb(198, 229, 255);\r\n}\r\n\r\n.se2{\r\n  background-color: rgb(172, 214, 251);\r\n}\r\n\r\n.se3{\r\n  background-color: rgb(129, 192, 247);\r\n  position: sticky;\r\n  bottom: 0;\r\n}<\/pre>\n
    \"position:<\/span><\/p>\n<\/div><\/div>\n
     <\/p>\n
    \u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u30fb\u30b3\u30f3\u30c6\u30ca\u306e\u52d5\u4f5c\u306e\u7279\u5fb4<\/h2>\n
    position:sticky\u3067\u8a2d\u5b9a\u3057\u305f\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u30fb\u30b3\u30f3\u30c6\u30ca\u306e\u52d5\u4f5c\u306e\u7279\u5fb4\u306f\u4e0b\u8a18\u306e\u901a\u308a\u3002
    \n <\/p>\n
    \u25a0\u30b9\u30c6\u30a3\u30c3\u30ad\u30fc\u30a2\u30a4\u30c6\u30e0\u30fb\u30b3\u30f3\u30c6\u30ca\u306e\u7279\u5fb4<\/strong><\/p>\n