scrollã«å¿œã˜ã¦è¦ç´ を固定/解除ã™ã‚‹CSS「position: stickyã€ã¨polyfill「sticky-stateã€ã®ç´¹ä»‹ï¼ˆè„±jQuery）当ブãƒã‚°ã§ã¯ã€ç”»é¢ã‚’スクãƒãƒ¼ãƒ«ã™ã‚‹ã¨é€”ä¸ã§ã‚µã‚¤ãƒ‰ãƒãƒ¼ã‚’固定/解除ã™ã‚‹æ©Ÿèƒ½ã‚’実装ã—ã¦ã„ã¾ã™ã€‚ã‚‚ã¨ã‚‚ã¨ã“ã®æ©Ÿèƒ½ã‚’JavaScript（jQuery）ã§ç‹¬è‡ªã«å®Ÿè£…ã—ã¦ã„ã¾ã—ãŸã€‚今回ã®ã“ã®ã‚µã‚¤ãƒ‰ãƒãƒ¼å›ºå®š/解除機能をCSSã®ã€Œposition: stickyã€ã§å®Ÿè£…ã—ç›´ã™ã“ã¨ã«ã—ã¾ã—ãŸã€‚ã„ã‚ゆる脱jQueryã§ã™ã€‚スクãƒãƒ¼ãƒ«ãŒçµ¡ã‚€JavaScriptã®å‡¦ç†ã¯ã€ã‚¤ãƒ™ãƒ³ãƒˆãŒé »ç™ºã™ã‚‹ãŸã‚ã«ãƒ–ラウザã«è² è·ã‚’ã‹ã‘ã‚„ã™ã„ã§ã™ã€‚今回CSSã®ã€Œposition: stickyã€ã§å®Ÿè£…ã—ç›´ã—ãŸã“ã¨ã§ã€ãƒ–ラウザã«å„ªã—ã„ページã«ãªã£ãŸã‚“ã˜ã‚ƒãªã„ã‹ãªã¨æ€ã£ã¦ã„ã¾ã™ã€‚今回ã¯ã“ã®ã€Œposition: stickyã€ã§ã®ã‚µã‚¤ãƒ‰ãƒãƒ¼å›ºå®šæ©Ÿèƒ½ã®å®Ÿè£…方法ã¨ã€polyfill「sticky-stateã€ã®ä½¿ã„方を紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ã¯ã˜ã‚ã«å½“ブãƒã‚°ã§ã¯ã€ãƒšãƒ¼ã‚¸ã‚’スクãƒãƒ¼ãƒ«ã™ã‚‹ã¨é€”ä¸ã§ã€Œã‚µã‚¤ãƒ‰ãƒãƒ¼ã€ãŒç”»é¢ã«å›ºå®šã•ã‚Œã‚‹ã‚ˆã†ã«ãªã£ã¦ã„ã¾ã™
ã€CSS】position: stickyã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã«è¿½å¾“ã™ã‚‹è¦ç´ を作る | misoblog
{{#tags}}- {{label}}
{{/tags}}