찾다
웹 프론트엔드H5 튜토리얼플로팅 레이어(플로팅 헤더, 푸터)가 모바일 단말기의 콘텐츠를 가리는 문제를 해결하는 3가지 방법_html5 튜토리얼 기술

오늘날 프런트 엔드 페이지, 특히 모바일 장치에서는

또는
, 그림과 같이 다음과 같습니다.

'답글 주제' 모듈은 페이지 플로팅을 따르며 항상 페이지 하단에 정지되어 있습니다. 코드 구조는 다음과 같습니다.


코드 복사
코드는 다음과 같습니다.

...

...

물론 이러한 기능을 구현하려면 position:fixed를 사용해야 합니다. 그러나 position:fixed 사용에는 버그가 있습니다. 하단의 플로팅

를 예로 들어 보겠습니다. 페이지가 하단으로 슬라이드되면 페이지가 벗어납니다. 고정된 위치로 인해 정상적인 문서 흐름이 발생하여 일부 내용이 가려집니다. 아래와 같이:

위 왼쪽이 문제 디스플레이, 오른쪽이 정상 디스플레이입니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 여기서는 더 나은 방법을 찾기 위해 제 의견 세 가지를 제시하고 싶습니다.

방법 1. Javasrript 솔루션

js를 사용하여 문제를 해결하세요. 슬라이더가 페이지 콘텐츠 하단으로 슬라이드되면 원래 문서 흐름에서 벗어나는 고정 위치를 문서 흐름에서 벗어나지 않는 상대 위치로 변경하세요.

스크립트를 사용하여 문제를 해결하는 것이 가장 어려운 방법입니다. CSS로 해결할 수 있다면 스크립트를 사용하지 마세요. 그래도 방법은 있습니다.

코드 복사
코드는 다음과 같습니다.

//스크롤바 Y축 스크롤 거리
function getScrollTop(){
return document.body.scrollTop;
}
//문서의 전체 높이
function getScrollHeight(){

Return document.body.clientHeight;
}
//브라우저 뷰포트 높이
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
 {
 windowHeight = document.documentElement.clientHeight;
 }
else
{
🎜 > Return windowHeight;
}

//슬라이딩 모니터링
window.onscroll = function(){
//아래로 슬라이딩하면

의 높이가 60이라고 가정하여 바닥글이 아래쪽으로 설정됩니다. 🎜> if((getScrollHeight () - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed')
else
$('.footer' ).css('위치','상대적');
}



방법 2. 몸체에 패딩 바닥 추가

html 태그에 padding-bottom 속성을 추가하면 일반적인 문서 흐름의 내용이 본문 하단에서 padding-bottom에 의해 설정된 거리가 됩니다.

단점은 모듈 재사용과 프로젝트 시작 후 CSS 파일을 자주 병합해야 한다는 점을 고려할 때 다른 페이지에 이 플로팅 블록이 필요하지 않으면 고정 위치 지정이 필요하지 않은 페이지에 부담을 준다는 것입니다. , 이 방법은 사용하지 않는 것이 좋습니다.



코드 복사
코드는 다음과 같습니다.
//높이를 가정합니다.
는 60px
body
{
padding-bottom:
}



방법 3. 형제 자리표시자

추가 개인적으로 이 방법이 가장 실용적이라고 생각합니다.

블록 외부에
블록을 추가합니다. ;div> 블록
와 동일한 높이로 설정하고 내용을 포함하지 않습니다. 이는 페이지 하단의
와 동일한 높이 공간을 차지하는 자리 표시자 효과를 가질 수 있습니다. , 페이지는 원래 아래쪽으로 미끄러집니다.
호버 블록은 자리 표시자 블록과 완벽하게 겹칩니다. 다른 페이지에는 영향을 미치지 않습니다. 코드는 다음과 같습니다. 유일한 단점은 의미론적이지 않고 실질적인 내용 없이 빈 태그를 추가한다는 것입니다.



코드 복사
코드는 다음과 같습니다.


위의 세 가지 방법은 제가 생각한 방법입니다. 제가 재능과 지식이 부족합니다. 혹시 글에 틀린 부분이나 더 좋은 방법이 있으면 알려주시면 감사하겠습니다.

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
解决Vue移动端多触点问题解决Vue移动端多触点问题Jun 30, 2023 pm 01:06 PM

在移动端开发中,我们经常会遇到多手指触控的问题。当用户在移动设备上使用多个手指滑动或缩放屏幕时,如何准确地识别和响应这些手势是一个重要的开发难题。在Vue开发中,我们可以采取一些措施来解决移动端多手指触控问题。一、使用vue-touch插件vue-touch是一个用于Vue的手势插件,它可以方便地处理移动端的多手指触控事件。我们可以通过npm安装vue-to

Vue开发中如何解决移动端双击放大问题Vue开发中如何解决移动端双击放大问题Jun 29, 2023 am 11:06 AM

随着移动端设备的普及,使用Vue进行移动端开发已经成为了常见的选择。然而,我们在移动端开发过程中经常会面临一个问题,就是双击放大。本文将针对这一问题,探讨在Vue开发中如何解决移动端双击放大的具体方法。移动端双击放大问题的出现,主要是因为移动设备在触摸屏上进行双击操作时,会自动放大网页的缩放比例。对于一般的网页开发来说,这种双击放大通常是有好处的,因为它可以

使用Python和百度地图API实现移动端地图定位功能的方法使用Python和百度地图API实现移动端地图定位功能的方法Jul 29, 2023 pm 11:33 PM

使用Python和百度地图API实现移动端地图定位功能的方法随着移动互联网的发展,地图定位功能在移动端应用中变得越来越常见。Python作为一种流行的编程语言,也可以通过使用百度地图API来实现移动端地图定位功能。下面将介绍使用Python和百度地图API实现地图定位功能的步骤,并提供相应的代码示例。步骤一:申请百度地图API密钥在开始之前,我们首先需要申请

如何处理PHP表单中的移动端和响应式设计如何处理PHP表单中的移动端和响应式设计Aug 10, 2023 am 11:51 AM

如何处理PHP表单中的移动端和响应式设计随着移动设备的普及和使用频率的增加,以及越来越多的用户使用移动设备访问网站,适配移动端成为了一个重要的问题。在处理PHP表单时,我们需要考虑如何实现移动端友好的界面和响应式设计。本文将介绍如何处理PHP表单中的移动端和响应式设计,并提供代码示例。1.使用HTML5的响应式表单HTML5提供了一些新特性,可以方便地实现响

Vue开发:优化移动端手势缩放卡顿问题Vue开发:优化移动端手势缩放卡顿问题Jun 30, 2023 pm 04:33 PM

Vue开发中如何解决移动端手势缩放页面卡顿问题近年来,移动端应用的普及使得手势操作成为用户交互的重要方式。在Vue开发中,实现移动端手势缩放功能往往会遇到页面卡顿的问题。本文将探讨如何解决这一问题,并提供一些优化策略。了解手势缩放原理在解决问题之前,我们首先需要了解手势缩放的原理。手势缩放通过监听触摸事件来实现,当用户用两个手指滑动屏幕时,页面会按照手指的滑

Vue移动端消除点击穿透问题的解决方案Vue移动端消除点击穿透问题的解决方案Jul 01, 2023 am 08:27 AM

Vue开发中如何解决移动端点击穿透问题移动端上经常会遇到点击穿透的问题,即用户在快速点击元素时,由于点击事件的执行时间较长,下一个元素会被穿透点击。这在开发中会造成一系列的问题,例如多次触发事件、页面跳转错误等。针对这个问题,Vue提供了几种解决方案。一、使用FastClick库FastClick是一个能够消除click事件在移动端300ms的延迟库。安装和

如何使用PHP生成可用于移动端的二维码?如何使用PHP生成可用于移动端的二维码?Aug 26, 2023 pm 02:51 PM

如何使用PHP生成可用于移动端的二维码?随着移动互联网的快速发展,二维码成为了商家推广、支付、活动等方方面面的重要工具。而使用PHP生成可用于移动端的二维码则成为了许多开发人员的需求。在本文中,我们将介绍如何使用PHP生成可用于移动端的二维码,并附上代码示例供参考。首先,我们需要先安装并引入一个PHP库,名为"endroid/qr-code"。这个库提供了一

Vue开发中如何解决移动端图片旋转问题Vue开发中如何解决移动端图片旋转问题Jun 29, 2023 pm 09:22 PM

随着移动互联网的快速发展,越来越多的网站和应用程序开始采用Vue.js进行移动端开发。然而,在移动端开发过程中,经常会遇到图片旋转的问题。图片旋转是指当用户在移动设备上拍摄照片时,由于设备方向的变化,导致照片在页面上显示的角度与实际拍摄的角度不一致。解决图片旋转问题,首先需要了解图片旋转的原因。当用户在移动设备上拍摄照片时,设备会自动为照片添加一些元数据,其

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는