position:sticky가 부트스트랩 부동 레이아웃을 만날 때의 함정 기록-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

position:sticky가 부트스트랩 부동 레이아웃을 만날 때의 함정 기록

青灯夜游

Oct 10, 2018 pm 05:41 PM

html

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

오늘 이야기할 내용은 이전에는 페이지가 아래로 슬라이드되면 페이지 상단에 고정되었던 항목입니다. , js는 스크롤 이벤트를 수신하는 데 사용되었으며 위치를 기준으로 판단되었습니다. 어떤 이유로 토글 고정 솔루션은 고정을 사용하여 다시 작성하기로 결정했습니다.

몇 번만에 작성을 마치고 스크롤 이벤트 리스너를 제거한 다음 메뉴 요소 .post에 <code>position:stickytop:0을 추가했습니다. nav 그러나 스타일이 작동하지 않습니다!

wtf! 의아해하며 이유를 찾기 시작했습니다. 해당 요소의 상위 요소에서 overflow:hidden 등을 추가하는 등의 오버플로 속성을 처리했을 수도 있다고 하는데, 살펴보니 그렇지 않았습니다.

그런 다음 부트스트랩 레이아웃에 문제가 있을 수 있다고 생각하여(사실 그것과 관련이 있습니다) 데모를 작성했습니다.

$(&#39;.side&#39;).height($(&#39;.main&#39;).height())

로그인 후 복사

하지만 문제가 없었는데 갑자기 홈페이지에서 사용하는 부트스트랩이 생각나서 버전이 3.x이더니 3.3.7버전으로 바뀌었는데 이때 문제가 발생합니다.

현재로서는 문제를 더 쉽게 찾을 수 있습니다. 4.x는 플렉스 레이아웃을 사용하지만 3.x는 여전히 부동 소수점 레이아웃을 사용합니다.

최종 코드(이 문제 참조): #🎜🎜#

$(window).scroll(function() { 
 $(&#39;.side&#39;).height($(&#39;.main&#39;).height())

 // other code 
 // ...

})

로그인 후 복사

#🎜🎜#메뉴가 .col-md-3에 속하므로 원래 질문에 해당합니다. 요소이므로 오른쪽의 .col-md-3는 왼쪽의 .col-md-9와 매우 일치해야 합니다. 다음 코드 줄을 추가하세요. #🎜🎜 #rrreee#🎜🎜#왼쪽 콘텐츠 영역에서 이미지 로딩이 지연되었기 때문에 다음 코드 줄을 계속 실행해야 합니다. #🎜🎜#rrreee#🎜🎜#요약: 위 내용은 이미지 전체 내용입니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다. 학습에 도움이 됩니다. 더 많은 관련 튜토리얼을 보려면 #🎜🎜# HTML 비디오 튜토리얼 #🎜🎜#을 방문하세요! #🎜🎜##🎜🎜#관련 추천: #🎜🎜##🎜🎜##🎜🎜#php 공공 복지 교육 동영상 튜토리얼#🎜🎜##🎜🎜#

위 내용은 position:sticky가 부트스트랩 부동 레이아웃을 만날 때의 함정 기록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.