position:sticky가 부트스트랩 부동 레이아웃을 만날 때의 함정 기록
- 青灯夜游앞으로
- 2018-10-10 17:41:133423검색
position:sticky 속성을 처음 접했을 때 이전의 많은 js 장면을 이 CSS 속성으로 다시 작성할 수 있다는 것을 깨달았습니다. 예를 들어, 웹사이트 오른쪽에 있는 많은 광고는 위로 스크롤한 후 수정해야 합니다. 이는 완전히 고정된 애플리케이션입니다. position:sticky 这个属性，我就意识到之前的不少 js 场景可以用这个 css 属性去改写。譬如 网站 右侧的不少广告，滚动上去后需要 fixed，完全就是 sticky 的应用啊。
今天要说的是 文章详情页 右侧的目录栏，当页面下滑的时候，它也会固定到页面顶部，之前是用 js 去监听 scroll 事件，然后根据位置进行判断，toggle fixed 的方案，出于一些原因，决定对它用 sticky 去重写。
几下就写完了，去掉滚动事件监听，然后将菜单元素 .post-nav 加上 position:sticky; top:0 样式，但是，不起效！
wtf! 百思不得其解，我开始搜索原因。在 so 搜到了 这个，说到可能是元素的父级元素有对 overflow 属性进行处理，比如加了什么 overflow:hidden 啥的，但是看了下，并没有这种情况。
然后我猜想会不会是 bootstrap 布局的问题（事实上确实有关系），写下 demo：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
body {font-size: 50px; font-weight: 900;}
.main {height: 2000px; background: #eee}
.menu {height: 200px; background: yellow}
.ad {height: 200px; background: red; position: sticky; top: 0px;}
.guess {height: 200px; background: blue;}
</style>
</head>
<body>
<p class="container">
<p class="row">
<p class="col-md-8 main">content</p>
<p class="col-md-4">
<p class="menu">menu</p>
<p class="ad">ad</p>
<p class="guess">others</p>
</p>
</p>
</p>
</body>
</html>但是没问题，突然想到网站用的 bootstrap 版本是 3.x，然后改成 3.3.7 的版本，这时候问题就出来了。
这时候问题就比较好定位了，4.x 用的是 flex 布局，而 3.x 还是 float 浮动布局，问题应该是出在这里了。
最终代码（参考 这个 issue)：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
body {font-size: 50px; font-weight: 900;}
.main {height: 2000px; background: #eee}
.side {height: 2000px;}
.menu {height: 200px; background: yellow}
.ad {height: 200px; background: red; position: sticky; top: 0px;}
.guess {height: 200px; background: blue;}
</style>
</head>
<body>
<p class="container">
<p class="row">
<p class="col-md-8 main">content</p>
<p class="col-md-4 side">
<p class="menu">menu</p>
<p class="ad">ad</p>
<p class="guess">others</p>
</p>
</p>
</p>
</body>
</html>对应到开始的问题上，因为 menu 是属于 .col-md-3 元素的，所以右边的 .col-md-3 需要和左边的 .col-md-9
.post에 <code>position:stickytop:0을 추가했습니다. nav 그러나 스타일이 작동하지 않습니다! 그런 다음 부트스트랩 레이아웃에 문제가 있을 수 있다고 생각하여(사실 그것과 관련이 있습니다) 데모를 작성했습니다. $('.side').height($('.main').height())하지만 문제가 없었는데 갑자기 홈페이지에서 사용하는 부트스트랩이 생각나서 버전이 3.x이더니 3.3.7버전으로 바뀌었는데 이때 문제가 발생합니다.
현재로서는 문제를 더 쉽게 찾을 수 있습니다. 4.x는 플렉스 레이아웃을 사용하지만 3.x는 여전히 부동 소수점 레이아웃을 사용합니다.
최종 코드(이 문제 참조): #🎜🎜#$(window).scroll(function() {
$('.side').height($('.main').height())
// other code
// ...
})#🎜🎜#메뉴가 .col-md-3에 속하므로 원래 질문에 해당합니다. 요소이므로 오른쪽의 .col-md-3는 왼쪽의 .col-md-9와 매우 일치해야 합니다. 다음 코드 줄을 추가하세요. #🎜🎜 #rrreee#🎜🎜#왼쪽 콘텐츠 영역에서 이미지 로딩이 지연되었기 때문에 다음 코드 줄을 계속 실행해야 합니다. #🎜🎜#rrreee#🎜🎜#요약: 위 내용은 이미지 전체 내용입니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다. 학습에 도움이 됩니다. 더 많은 관련 튜토리얼을 보려면 #🎜🎜# HTML 비디오 튜토리얼 #🎜🎜#을 방문하세요! #🎜🎜##🎜🎜#관련 추천: #🎜🎜##🎜🎜##🎜🎜#php 공공 복지 교육 동영상 튜토리얼#🎜🎜##🎜🎜#위 내용은 position:sticky가 부트스트랩 부동 레이아웃을 만날 때의 함정 기록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!