底部固定js可收起关闭

底部固定JS可收起关闭的基础概念

底部固定（Sticky Footer）是一种网页设计模式，它确保页面的底部元素始终保持在视口的底部，即使页面内容不足以填满整个屏幕。当页面内容足够多时，底部元素会跟随内容滚动。这种设计通常用于网站页脚，包含版权信息、联系方式等。

类型

固定底部：底部元素始终固定在视口底部。
可收起关闭：用户可以手动关闭底部元素，使其暂时消失。

应用场景

网站页脚：包含版权信息、联系方式等。
通知栏：显示重要消息或更新。
工具栏：提供常用功能的快捷方式。

实现方法

以下是一个简单的HTML和JavaScript示例，展示如何实现一个底部固定且可收起关闭的功能：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Footer Example</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
        }
        .content {
            min-height: 100%;
            padding-bottom: 60px; /* Height of the footer */
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 60px;
            background-color: #333;
            color: white;
            text-align: center;
            line-height: 60px;
        }
        .footer.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- Your page content goes here -->
        <p>Main content of the page...</p>
    </div>
    <div class="footer" id="footer">
        <button onclick="toggleFooter()">Toggle Footer</button>
        <p>© 2023 Your Company. All rights reserved.</p>
    </div>

    <script>
        function toggleFooter() {
            const footer = document.getElementById('footer');
            footer.classList.toggle('hidden');
        }
    </script>
</body>
</html>

JavaScript

function toggleFooter() {
    const footer = document.getElementById('footer');
    footer.classList.toggle('hidden');
}

可能遇到的问题及解决方法

问题1：底部元素遮挡内容

原因：底部元素固定在视口底部，可能会遮挡页面内容。 解决方法：在内容区域底部添加一个与底部元素高度相同的padding，以确保内容不会被遮挡。

问题2：滚动时底部元素闪烁

原因：页面滚动时，固定元素的定位可能导致视觉上的闪烁。 解决方法：确保CSS中没有冲突的样式，特别是position属性的使用。

问题3：JavaScript错误导致功能失效

原因：JavaScript代码中可能存在语法错误或逻辑错误。 解决方法：使用浏览器的开发者工具检查控制台中的错误信息，并逐一修复。

通过上述方法，可以实现一个简单且功能齐全的底部固定且可收起关闭的页脚。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS|JavaScript脚本也可固定位置

问题描述 “如果不改变标签的位置，如何固定JS的脚本呢”，当我们在网页中写入JavaScript代码时，如果我们每次都必须在其他标签之后嵌入JavaScript代码，不仅会造成代码的冗余...我们今天来学习一下怎么将JavaScript脚本位置固定且能让脚本生效吧！解决方案函数是编程语言中很常见的概念，在JavaScript脚本中也不例外。...我们了解了BOM我们现在来解决怎么让其固定位置且生效，大家都知道在JavaScript中我们都会用function来定义函数，让函数调用来解决这个问题。 js代码，这句代码在刚开始是不会执行的，当页面完全加载完毕后才会调用js代码。...如果想要其位置固定就需定义相应函数来调用其js代码让其生效。我们在定义函数时一定要注意其符号必须是英文状态下的符号，否则会产生解析错误。

3K2 0

JS网页顶部弹出可关闭广告图层

/> 网页特效网页顶部弹出可关闭广告图层站长特效网 #informationbar{ position: fixed;...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。

9.8K6 0

底部悬浮框上拉和下拉功能

实现一个通过触摸拖动操作来展开和收起底部悬浮框，并根据拖动过程中的位置和状态来调整底部容器的高度和展开状态的功能 <!...padding: 0; margin: 0; } /* 固定... js...5：悬浮框与窗口底部的距离和悬浮框与页面顶部的距离，判断是否需要展开或收起底部容器。...根据底部容器的高度和展开状态，添加或移除.open类，以控制底部容器的展开和收起。

2194 0

安卓ios兼容问题及处理（小程序H5）

IOS机型margin属性无效问题问题：底部footer设置margin属性的时候发现真机IOS上无效，在微信开发者工具/安卓手机/谷歌iphone/安卓机型皆正常原因： iOS8后，UIView...安卓/IOS图片卡顿异形问题：安卓上图片会出现卡顿，变形，然后才会显示正常的图片大小原因： image组件默认宽度300px、高度225px 解决办法：使用image 标签，尽量固定宽高。...clearTimeout(myFunction) }) document.body.addEventListener('focusout', () => { // 软键盘关闭事件...setTimeout(function() { window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置...安卓ios打开相机选择相册 js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera

7.8K7 1

移动端那些戳中你痛点的软键盘问题及解决方法

webview上滚，但滚动的结果有些出乎意料：输入框本身可以理解地滚动到了实际可视区域的正中间，但 fixed 元素不会发生重新计算，而是保持原来的相对位置，跟着输入框一起被上推；在滚动过程中，还会允许屏幕底部超出页面底部...衍生问题: 但这样引出了一个新的问题：在安卓系统下的app端，会有底部按钮被遮挡的问题。 GIF 如下： ?...解决办法：当键盘收起时，加入下面其中一种办法就可以解决滚动到顶部 window.scrollTo(0,0) 滚动到底部 window.scrollTo(0, Math.max(document.body.clientHeight...参考文章： WebView上软键盘的兼容方案[5] js如何获取iOS键盘高度[6] 移动端input“输入框”常见问题及解决方法[7] ios键盘难题与可见视口（visualViewport）api[...01/20/WebView%E4%B8%8A%E8%BD%AF%E9%94%AE%E7%9B%98%E7%9A%84%E5%85%BC%E5%AE%B9%E6%96%B9%E6%A1%88/ [6] js

8.9K3 0

<a href=" 全栈程序员栈长 • 2天前 • 未分类 • 阅读 0

后来万恶的PM说 “你这个按钮呀，要固定在底部比较好” ，于是乎就通过 position:fixed 固定到底部了。...那么，问题来了，在ios 下，虚拟键盘是浮在页面上层的，导致的结果是当键盘收起后，浮在最底部的按钮不在最底下，而跑到中间来了，(极端条件下还可能挡住输入框导致无法输入)，并且随着屏幕的滚动而滚动，，...两种方案，一滚动时动态计算位置，实时监控位置必定是要消耗性能的，二是由于无法监控到虚拟键盘打开或者关闭，所以只能通过对表单元素绑定focus和blur事件来改变按钮position来达到想要的效果。

4001 0

iOS 12.0 WebView键盘弹出，关闭后界面没有回收的问题

iOS 12.0 WebView键盘弹出，关闭后界面没有回收的问题背景公司有人反馈，iOS 12.0的手机上，H5页面有个地方键盘弹出了，关闭之后，再次点击输入框，没有反应了，其实是界面上移了之后，...，在收起时，对webview的scrollview做偏移处理，设置后，发现对笔者的项目来说仍旧不生效，笔者的项目同一个网页上有多个可输入的地方，且有在弹出框输入的操作。...故而再次修改：笔者发现，有人给出参考方法，由H5端，监听键盘弹起和回收，然后进行处理，但是如果让H5处理，需要每个业务的H5都要单独处理，所以笔者就想，由原生监听键盘收起的通知，然后调用js的方法，代码如下...selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil]; } 然后在通知的方法中实现，调用JS...evaluateJavaScript:jsStr completionHandler:nil]; } 参考 iOS12 WKWebView出现input 键盘页面上顶不下移解决方法 ios 微信webview在键盘关闭后

2.6K2 0

BottomSheet底部动作条使用

底部动作条底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。...行为显示底部动作条的时候，动画应该从屏幕底部边缘向上展开。根据上一步的内容，向用户展示用户上一步的操作之后能够继续操作的内容，并提供模态[1]的选择。...点击其他区域会使得底部动作条伴随下滑的动画关闭掉。如果这个窗口包含的操作超出了默认的显示区域，这个窗口需要可以滑动。滑动操作应当向上拉起这个动作条的内容，甚至可以覆盖整个屏幕。...当窗口覆盖整个屏幕的时候，需要在上部的标题栏左侧增加一个收起按钮。...0 完全展开为1 } }); } } 当然BottomSheet这种效果是高度可扩展的，你可以在布局中实现你想要的任何效果。

1.8K8 0

微信小程序开发--总结

调试不便，主要是很多错误没有暴露出来，例如之前遇到过在app.json不小心在tabBar后面对加了个空格，导致底部工具栏不显示，但又没有任何提示等等。...，莫名的收起/展开。...限制文件大小限制这个大家都清楚，从原来的1M已经增加到2M~~ 页面可访问嵌套层级（即页面栈）也就是记录的已访问页面数，可以通过返回键返回的页面栈，目前最多是5级。...理论上来说border是固定的，不需要随着屏幕分辨率来调整大小。...尽可能的模板化对应项目中出现两次及以上的模块区域，尽可能的用template复用，项目目录中新建个template专门管理复用内容，有必要的话，也可以将模板内涉及到的js部分也抽离出来，组件化。

5.8K3 0

h5软键盘挡住输入框问题解决（android）

在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起（ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域...第二种会出现遮挡问题于是想到以下两种方案： 1.通过动态增加页面高度和设置scrollTop来使输入框到达合适的位置 2.设置相对定位，通过top来使输入框到达合适的位置影响实现的两个点： 1.js...拿不到键盘的弹出和收起事件; 2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。...直接上代码，这里是react项目（css设置absolute配合js改变top实现效果，transition过渡增强用户体验，这里就不放了） getElementOffsetTop(el) {...所以为了统一效果，将底部按钮取消fixed，随页面滚动。第二，如果点击键盘上的收起键盘按钮，会导致页面top无法恢复，因为没有触发输入框失焦方法，需点击空白处恢复。

6.5K1 0

【H5】209-可能这些是你想要的H5软键盘兼容方案

IOS 软键盘收起表现触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。 Android 软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。...novalidate="novalidate"，novalidate 属性规定当提交表单时不对其进行验证，由于 pattern 校验兼容性不好，可以不让其校验，只让其唤起纯数字键盘，校验工作由 js 去做...兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ，就会惊奇的发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置...微信官方已给出解决方案，只需在软键盘收起后，将页面（webview）滚回到窗口最底部位置（clientHeight位置）。 console.log('IOS 键盘收起啦！')...在 UC 浏览器上，软键盘弹起后，浏览器上面的标题栏高度就有个高度变小延时动态效果，这样导致 webview 往下滚了一点，底部输入框滚到了非可视区。

4K1 2

h5页面在不同iOS设备上的问题总结

键盘收起，页面卡住，不回落 ios12上，发现键盘收起的时候，页面会卡主，留下底部一片空白，稍微动一下页面，就会恢复。...3. ios12在微信小程序的webview，键盘收回，页面底部会留白这个问题怀疑是页面的scroll设置了auto导致的。解决方案：滚动一下页面，请参考链接，代码有效。...键盘遮挡输入框输入框如果使用了fixed固定在底部，键盘顶起的时候，iphone上fixed会失效，导致页面滚动输入框会随着页面滚动，并且在部分机型上，输入框偶尔会被键盘遮挡，这种偶现的问题，很不友好

1.9K2 0

可能这些是你想要的H5软键盘兼容方案

IOS 软键盘收起表现触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。 Android 软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。...novalidate="novalidate"，novalidate 属性规定当提交表单时不对其进行验证，由于 pattern 校验兼容性不好，可以不让其校验，只让其唤起纯数字键盘，校验工作由 js 去做...兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ，就会惊奇的发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置...微信官方已给出解决方案，只需在软键盘收起后，将页面（webview）滚回到窗口最底部位置（clientHeight位置）。...在 UC 浏览器上，软键盘弹起后，浏览器上面的标题栏高度就有个高度变小延时动态效果，这样导致 webview 往下滚了一点，底部输入框滚到了非可视区。

8.1K2 0

Flutter之SliverAppBar

其他常用属性说明如下：属性说明 leading 左侧控件，通常情况下为"返回"图标 title 标题，通常为Text控件 actions 右侧控件 flexibleSpace 展开和折叠区域 bottom 底部控件...时，向下滑动时，即使当前CustomScrollView不在顶部，SliverAppBar也会跟着一起向下出现 pinned 设置为true时，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态...snap 设置为true时，当手指放开时，SliverAppBar会根据当前的位置进行调整，始终保持展开或收起的状态，此效果在floating=true时生效实现文章开头效果的整体代码如下： class

1.4K3 0

听饿了么前端主管如何解析H5渲染性能

优化JS执行（JS）缩小样式计算的范围并降低其复杂性（style）避免大型、复杂的布局和布局抖动（layout、paint）使用输入处理程序去除抖动（layout、paint）坚持仅合成器的属性和管理层技术...注意图中标记区域，当点击展开/收起活动的小三角的时候会有一个旋转180度的交互效果，相信大家对此都很熟悉。这种效果实现起来也很简单，设置transition过渡属性就能完成。...另外如果元素有动画/过渡效果，可未指定层级顺序高于下方浮动层，此时会假定下方的浮动层在动画期间会受影响，从而无法被压缩。...减少绘制区域一般我们编写页面的时候都会为头部和底部设置固定浮动，这涉及到减少绘制区域的优化策略。...在没有设置浮动的情况下，每次页面滚动头部和底部就会被重新渲染，解决方案是设置浮动后将这些浮动的头部和底部提升为单独的层。以上为今天的分享内容，谢谢大家！

1.2K1 0

滚动穿透的6种解决方案【已自测】

关键代码： JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题：弹层中内容滚动到顶部或底部后，还会连带页面body一起滚动。也就是还会发生穿透效果。...真正的问题是当我们滑动弹窗可滚动区域，把可滚动区域的内容上滑到底部或下拉到顶部后，再触发弹窗可滚动区域准备滑动，此时的背景页面就会跟随滚动。真是恐怖。...因此还需要我们对弹层的可滚动区域的滑动事件做监听：第一种情况，若向上滑动时，到达底部；或者第二种情况，若向下滑动时，已到顶部。这两种情况任意一种发生时，就阻止滑动事件。这段逻辑代码如下： ?...但是同样的问题是，需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则，就和第二条一样，触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动。...这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。

13.8K3 1

两万字：讲述微信小程序之组件

4.通过wxml内部写样式 4.movable-area（可移动、放大区域，父组件） 5.movable-view（可移动、放大区域，子组件）常用的几个属性 6.cover-image目前原生组件均已支持同层渲染..."0px" 否后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0 snap-to-edge boolean false 否当 swiper-item 的个数大于等于 2，关闭..."0px" 否后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0 snap-to-edge boolean false 否当 swiper-item 的个数大于等于 2，关闭...，movable-view是否还可以移动 1.2.0 x number/string 否定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画；单位支持...px（默认）、rpx； 1.2.0 y number/string 否定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画；单位支持px（默认）、

3.9K2 0

Android获取软键盘的高度、键盘的打开与关闭、监听键盘处于打开还是关闭状态

最近在项目中，需要获取到软键盘的高度，再将底部的布局上移键盘的高度，话不多说，直接上代码：获取软键盘高度 //一个静态变量存储高度 public static int keyboardHeight...decorView.getViewTreeObserver().addOnGlobalLayoutListener(onGlobalLayoutListener); } 键盘的打开与关闭操作...= null; } return false; } } 监听键盘处于打开还是关闭状态： private void setListenerToRootView()...getApplicationContext(), "键盘弹出", Toast.LENGTH_SHORT).show(); } else { //键盘收起...//Toast.makeText(getApplicationContext(), "键盘收起", Toast.LENGTH_SHORT).show();

7.8K1 0

移动端输入框填坑系列（一）

一、文字输入限制问题我们拿最多可输入16个字为例。当输入字数（注意，不是字符长度）超过16字时，会触发 tips 提示，并且不能继续输入。...因此需要在 js 中来进行字数限制。再加上汉字输入问题，那么就加入一个标记位，来判断是否是直接的文字输入。然后监听 input ，限制字数，当超过字数限制的时候，把前16个字截断显示出来就ok了。...在 ios 上的效果：那么如果我们需要将输入框固定在屏幕下方，而当键盘被唤起同时输入框固定在键盘上方（如下图样式）该如何解决呢？首先我们来看下 ios 的表现。...，除了使用失去焦点（blur）方法，还有什么方法可以判断键盘是否收起呢？...这里可以使用 setInterval 监听，当当前 window.innerHeight 和整屏高度相等的时候判断为键盘收起。

7K0 0

利用HTML5，无JS实现各种交互效果

imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 如果我们使用JS脚本手动移除这个`open`属性，即使没有点击行为的发生，我们内容也会收起。...于是我们可采用李代桃僵策略，让元素的outline交给元素，方法就是在中再内嵌一个，同时通过tabindex属性remove掉原本的可访问性...JS捕获键盘行为手动设置outline 这个方法不需要对HTML进行任何的改动，是通过CSS和JS配合对全局的元素进行outline优化。...imageMogr2/auto-orient/strip) 因为“更多”元素是在底部，因此效果实现的要点的所有的内容信息都放在``元素内部，然后通过``元素的`open...('details');``` 最后，无JS实现的好处有：省了代码，加载快了；实现更简单了，开发快了； JS还没加载交互也能进行，体验好了；键盘无障碍和aria阅读设备无障碍天然支持，体验档次高了

7.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

底部固定js可收起关闭