CSS 전용 끈적한 바닥 글을 만드는 방법
일반적으로 자바 스크립트가 필요합니다. 스크롤링 효과를 수행한다. 웹 페이지의 다른 사용자 작업과 관련됩니다. 스크립트는 다음과 같은 작업을 수행합니다. 페이지가 얼마나 멀리 또는 아래로 스크롤되는지 추적하기, 과 행동을 촉발시킨다. 임계 높이에 도달하면.
스크롤 효과에 JavaScript를 사용하는 것이 특히 나쁜 것은 아닙니다. 사실 더 복잡한 경우가 있습니다. JavaScript 없이는 해결할 수 없다.. 그러나 거기에있다 CSS 해킹 이 스크립트를 때때로 대체 할 수있는.
이 게시물은 당신에게 호를 보여줄 것입니다w를 사용하여 CSS를 사용하여 페이지 스크롤에 바닥 글 효과를 나타냄. 이 두 가지 사례를 사용하여 전체 페이지 (데모 참조) 및 개별 페이지 요소 (기사 등)에 대한 사례를 보여줍니다..
전체 페이지
바닥 글을 만들어야합니다. 페이지 아래에서 나타납니다. 사용자가 아래로 스크롤하는 동안. 또한 페이지를 다시 스크롤 할 때 바닥 글이 필요합니다. 숨어있다 페이지 아래 다시.
이 목표를 달성하려면 먼저 고정 된 위치의 바닥 글 화면 하단에.
1. 고정 바닥 글 만들기
하자 내용과 꼬리말을 추가하십시오. 먼저 페이지로 HTML 태그를 사용하고 있습니다. 내 데모에서는 바닥 글 안에 박쥐 모양의 이미지가 표시되므로 재미있는 효과는 있지만 원하는 다른 이미지를 선택할 수 있습니다. Lorem ipsum dolor amet 앉아서 ... CSS로 이동, 여백을 없앱니다. 주위의 몇 가지 치수 ( 적용 색상 모두 설정 이렇게하면 바닥 글에 바닥에 충분한 공간이 생깁니다. 눈에 보이다 사용자가 페이지를 아래로 스크롤하면. 그게 전부 야. 전체 웹 페이지에 대한 바닥 글 표시 효과가 수행됩니다. 아래의 Codepen 데모를 확인하십시오.. 이 기술은 개별 HTML 요소 (꼬리말 포함)에 사용할 수 있습니다. 충분히 길다 적절한 페이지 스크롤 효과. 이 방법은 현재 Chrome 및 Internet Explorer에서 작동하지 않으므로 조금 해킹되지만 괜찮은 대체 버전이 있습니다.. 먼저 꼬리말로 긴 기사를 만들어 봅시다. 의미 론적 코드를 홍보하기 위해 나는 선택했다. Lorem ipsum dolor amet 앉아서 ... 아래에서 기본 스타일링 기사와 꼬리말의. 내 기사는 현재 다음과 같습니다. 물론 다른 기본 스타일 규칙도 사용할 수 있습니다.. 이전 바닥 글이 수정되었으며,이 중 하나는 끈적 거리다. 적용 그만큼 사용자가 아래로 또는 위로 스크롤하는 동안 바닥 글이 나타나기 시작하거나 사라지는 지점을 결정하므로 값을 사용자의 취향에 맞게 조정할 수 있습니다.. 줘 물품의 하단 여백과 동일한 값, 바닥 글에 전체 바닥 글을 표시하는 데 충분한 공간이 있어야합니다.. 이제 우리는 필요하다. 물품의 바닥 옆에 개구부가있다. 이를 통해 끈적 인 바닥 글이 아래로 스크롤되는 것을 볼 수 있습니다.. 이를 달성하려면 그만큼 마지막으로 기사 뒤에 꼬리말을 두다. ~을 사용하여 그리고 그게 바로 스크롤 위에 드러내는 효과가있는 개별 페이지 요소입니다. 아래 Codepen 펜을 확인하십시오. 또한 Github 페이지에서 두 가지 유스 케이스를 모두 찾을 수 있습니다.. 과 의미론. 하나,
꼬리말이 보일 때까지 계속 스크롤하십시오.
태그로 여백을 0으로 설정, 충분히 길게 만들어라. 맞춤 높이 추가 스크롤을 유도합니다 (페이지의 본문 내용이 스크롤을 발생시키기에 충분히 길면 높이를주지 않아도됩니다).폭 과 신장)를 바닥 글에 지위를 고치다 화면 하단에 위치 : 고정; 과 하단 : 0; 속성들. body font-family : 크림슨 텍스트; 글꼴 크기 : 13pt; margin : 0; 바닥 글 너비 : 100 %; 높이 : 200px; 위치 : 고정; 하단 : 0; 배경색 : # DD5632;
2. 바닥 글 숨기기
Z- 색인 : -1 꼬리말에 규칙을 매기려면 다른 모든 요소 뒤에 배치하십시오. 페이지에. 과 태그를 흰색으로하기 위해 바닥 글을 덮다.. 본문, html 배경색 : #fff; 바닥 글 너비 : 100 %; 높이 : 200px; 위치 : 고정; 하단 : 0; 배경색 : # DD5632; z- 색인 : -1;
3. 하단 여백 조정
마진 아래 ~의 꼬리표 꼬리말의 높이와 같다. (내 예시 200 픽셀에서). 몸체 (높이 : 1000px; margin : 0; margin-bottom : 200px;
개별 페이지 요소
1. 긴 기사 작성
과 .
제 1 조
기사 너비 : 500px; background-color : # FEF9F3; 패딩 : 20px 40px; article> 바닥 글 높이 : 100px; 배경색 : # FE0178; body font-family : cormorant garamond;
2. 바닥 글 고정시키기
위치 : 끈적 규칙이 바닥 글에 있으므로 기사의 경계 내에서 움직이지만 지위를 유지하다 사용자가 위아래로 스크롤하는 동안 화면에. 문서> 꼬리말 (높이 : 100px; 배경색 : # FE0178; position : -webkit-sticky; 위치 : 끈적; 하단 : 80px;
하단 : 80px 룰은 바닥 글의 위치를 수정합니다. 기사 하단의 80 픽셀. 기사 너비 : 500px; background-color : # FEF9F3; 패딩 : 20px 40px; margin-bottom : 80px;
3. 부분 투명한 배경 추가
배경색 기사의 선형 그라디언트 배경 이미지, 기사 상단에서 바닥 글 상단까지 배경색으로 채색되어있다. 나머지 부분은 바닥에 있습니다. 투명하게 만들었다.. 기사 너비 : 500px; 패딩 : 20px 40px; 배경 이미지 : 선형 그래디언트 (아래쪽, # FEF9F3 calc (100 % - 120 픽셀), 투명 0); margin-bottom : 80px;
calc (100 % -120 픽셀) CSS 함수는 기사의 전체 높이 마이너스 바닥 글. 내 예에서는 120 픽셀 (높이 : 100 픽셀)입니다. + 패딩 용 20px).
4. 바닥 글을 뒤로 놓습니다.
Z- 색인 : -1 CSS 규칙. 문서> 꼬리말 (높이 : 100px; 배경색 : # FE0178; position : -webkit-sticky; 위치 : 끈적; 하단 : 80px; z- 색인 : -1;
