开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使正文不滚动菜单栏

要使正文不滚动菜单栏，可以通过CSS和JavaScript来实现。以下是一种常见的实现方式：

使用CSS将菜单栏固定在页面顶部或底部：
- 设置菜单栏的position属性为fixed，可以将菜单栏固定在页面的顶部或底部。
- 设置菜单栏的top或bottom属性为0，使其与页面顶部或底部对齐。
- 设置菜单栏的width属性为100%或固定宽度，以适应页面宽度。

使用JavaScript监听页面滚动事件：
- 使用window.addEventListener('scroll', function() {...})来监听页面滚动事件。
- 在滚动事件的处理函数中，判断页面滚动的距离。
- 当滚动距离超过菜单栏的位置时，为菜单栏添加一个固定的样式，例如position: fixed和top: 0。
- 当滚动距离小于菜单栏的位置时，移除菜单栏的固定样式。
调整正文内容的样式：
- 当菜单栏固定在页面顶部时，可以通过设置正文内容的padding-top属性，为菜单栏留出空间，避免内容被菜单栏遮挡。
- 当菜单栏固定在页面底部时，可以通过设置正文内容的padding-bottom属性，为菜单栏留出空间。

这样，无论用户如何滚动页面，菜单栏都会保持固定位置，不会随着页面滚动而滚动。

以下是一个示例代码片段，演示如何使用CSS和JavaScript实现固定菜单栏：

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header class="menu">
    <!-- 菜单栏内容 -->
  </header>
  
  <div class="content">
    <!-- 正文内容 -->
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.menu {
  position: fixed;
  top: 0;
  width: 100%;
  /* 其他菜单栏样式 */
}

.content {
  padding-top: 50px; /* 菜单栏高度 */
  /* 其他正文样式 */
}

JavaScript (script.js):

window.addEventListener('scroll', function() {
  var menu = document.querySelector('.menu');
  var content = document.querySelector('.content');
  var menuHeight = menu.offsetHeight;

  if (window.pageYOffset > menuHeight) {
    menu.classList.add('fixed');
    content.style.paddingTop = menuHeight + 'px';
  } else {
    menu.classList.remove('fixed');
    content.style.paddingTop = 0;
  }
});

在上述示例中，通过CSS将菜单栏固定在页面顶部，并设置正文内容的padding-top属性为菜单栏的高度。通过JavaScript监听页面滚动事件，根据滚动距离为菜单栏和正文内容添加相应的样式。

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

有帮助

没帮助

相关·内容

↓↓↓ HTML如何局部滚动而头尾不滚动 ↓↓↓

HTML页如何局部滚动而整体不滚动解决方案1：兼容 android（4.3版本三星 note2）进行嵌套，没有引用任何插件，纯css。...scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();"> 这里是要滚动的内容...DOCTYPE html> 头部不滚动...(delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动...，因此，临界时候手动边界滚动定位 this.scrollTop = delta > 0 ?

3K1 0

如何使背景照片覆盖全屏不会随屏幕滚动

html 中 css 中使背景照片覆盖全屏 body,html{ background: url(..

1.5K3 0

如何在DataGrid里面产生滚动条而不滚动题头

我们在开发的时候一定遇到，使用DataGrid的时候由于不想分页（数据没有那么多）但是又显示不在一页里面，此时我们希望在DataGrid里面出现一个滚动条，可以上下滚动DataGrid里面的数据而不用上下滚动页面...，由于写本文的目的是为了说明如何实现，所以对于细节性的问题读者可以自己思考完成（比如：既要分页又要滚动等等）。...为了可以滚动DataGrid我们需要一个可以让客户端的Table滚动js脚本（该js代码我是从CodeProject上面下载的），但又不能滚动Table的题头（也就是第一行）。...Table是由组成的，我们的脚本里面是需要使用到Table的Thead和Tbody的（在大多数的客户端的应用中都要用到此功能比如：客户端的排序、以及列的托拽等等），因此我们接下来的任务就是如何为我们客户端的这个...接下来我们要将我们准备的js代码内嵌到我们的控件里，好让放这个控件的页面上最终在客户端都会有这段js代码用来完成我们滚动的任务。

1.5K11 0

如何纯CSS实现标题栏、表格头水平滚动垂直不滚动

有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置overflow-y:hidden实现，很基本的实现，没什么难度。但是，如果同时希望垂直滚动的时候，表格头是固定的。此时该如何实现呢？...box{display:flex;flex-direction:column;}.top{height:30px;}.content{flex:1}但是实现代码比起：《纯CSS实现标题栏、表格头水平滚动垂直不滚动...转载本站文章《如何纯CSS实现标题栏、表格头水平滚动垂直不滚动》,请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0731_8650

1.5K0 0

我如何用一行Css代码使谷歌浏览器的数据网格滚动快10倍

因此，我打开并开始录制，向下滚动列表一点，然后停止录制。...这就是我所看到的：DevTools / Performance 滚动"顶部链接站点"数据网格的性能配置文件，非常低的 FPS "任务"块上的那些红耳朵表明，在滚动时，某些东西需要的时间比可接受的时间要长...对于此记录，它显示时间主要用于更新图层，如紫色方块中的文本所示，其中表示：Update layer tree: 瀑布图显示， “Update layer tree” 是使滚动变慢的原因。...好消息 - 我试着应用一些秘密酱汁，再次滚动，现在感觉好多了。这也清楚地显示在它的性能配置文件：滚动改进了很多！...现在每个帧需要大约 16 ms，我们以接近 60 FPS而不是60 f7 的速度滚动。了不起！那我做了什么？

2.1K1 0

clientHeight、scrollHeight、offsetHeight和scrollTop之间区别

屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight 正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight...内容高+padding+边框：document.body.offsetHeight 滚动条已经滚动的高度：document.body.scrollTop 屏幕分辨率高：window.screen.height...（包括带滚动条的隐蔽的地方），它带着滚动条呢，但是一般会用到滚动条的地步么，好吧，我没用到过，也许我写的代码还不够多，结果显示上图h4；四、关于innerheight和outerheight 这俩我也不咋用过...，但是这看名字就基本知道啥区别啥意思了的感觉 innerHeight，inner,inner,里面的里面的，那就是不包括菜单栏、工具栏以及滚动条等的高度只看里面的外面的忽视。...返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。

9832 0

「大众点评点餐」小程序开发经验 03：事件联动

滚动下方右侧菜品分类详情时，当该分类详情模块顶部接触到滚动区域的顶部，左侧对应的导航菜单栏高亮。...我们实践时发现，使用 scroll-view 可以不指定高度，页面有滚动区存在。但这么做，滚动时无法触发 scroll 事件，也就无法完成联动设计。...但我们发现，右侧 scroll-view 不会因此滚动到指定的高度。我们猜想，可能是因为获取到的 dataset.id 是一个数字类型字符串，其内部使用 === 方式导致不匹配。...由于小程序无法获取元素的宽高，位置信息，滚动右侧实现左侧联动效果的实现难度非常高。如何准确的获取右侧滚动到的具体分类，并让左侧导航菜单栏相应分类高亮，且在可视的范围内？...左侧导航菜单栏高亮分类切换的边界条件为：右侧分类菜单详情的分类小灰条顶部，与右侧滚动区顶部重合。

2.6K4 0

10.6K Star开源一款轻量级简洁高效的开源PDF阅读器,只有7MB,很小了,Windows必备

SumatraPDF软件介绍 Sumatra PDF是一款免费开源的轻量级PDF阅读器，体积小、速度快、绿色便捷、单执行文件，不写注册表项。...4.内置搜索：SumatraPDF具有内置的搜索功能，使您可以从大型文档中迅速找到所需的内容。...3.导入文件：在应用程序中，点击菜单栏的“文件”，然后选择“打开”，或者直接使用快捷键Ctrl+O。在文件浏览器中选择要打开的PDF文件，然后点击“打开”。...4.浏览文件：打开文件后，您可以使用菜单栏上的导航按钮来浏览文件的不同页面。您还可以使用滚动条或鼠标滚轮来滚动页面。 5.搜索内容：如果您想要在文档中搜索特定内容，可以使用菜单栏上的搜索框。...点击菜单栏上的“设置”按钮来访问和修改这些选项。无论是阅读大型PDF文件，还是浏览其他支持的格式，该软件都是一个强大而灵活的选择。

9714 0

Lungo for mac(防止电脑休眠) 2.2.2激活版

Lungo Mac版使你即使长时间不进行电脑操作，并且以非全屏模式观看YouTube视频，也不会休眠！...- 阅读长文章而不滚动。- 使用屏幕查看实时统计数据。- 监控长期运行任务的进度。Lungo for Mac 软件特征- 右键单击菜单栏图标以快速激活。- 选择激活，然后在“首选项”中单击鼠标左键。...- 在首选项中设置默认持续时间，通过单击菜单栏图标激活Lungo时使用。- 从脚本或终端控制Lungo。（有关更多信息，请访问网站）重要提示：如果您关闭盖子，Lungo不会阻止您的Mac睡觉。

1.5K3 0

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

clientWidth * scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight * ****** 元素视图属性结束...* ****** Window视图属性（低版本IE浏览器[<IE9]不支持）【自测包含滚动条，但网络教程都说不包含？？？】...* innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏） * innerHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏） * *...低版本IE的innerWidth、innerHeight的代替方案） * document.documentElement.clientWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏...、工具栏、滚动条） * document.documentElement.clientHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条） *

8782 0

Vue实战—菜单栏商品展示数据交互（8）

上篇我们将菜单栏，商品展示结构完成，本次我们为这两个部分接入数据。...1556704730382.png 菜单栏接入数据导入组件，定义需要的数据格式 // 导入BScroll 滚动组件 import BScroll from "better-scroll...我们执行初始化滚动函数。...，https://cn.vuejs.org/v2/api/#ref; calculateHeight()方法获取左侧每一个菜单栏目的元素；使用selectMenu()方法，在我们点击菜单后，右侧显示对应的商品信息...} }, computed定义属性 currentIndex属性绑定在左侧菜单栏，使菜单元素与右侧内容作为对应，展示给用户。

9610 1

手势魅力-设置一个触摸菜单

Demo的源码,复制该标题后台回复[手势魅力-设置一个触摸菜单]就可以了的,初次翻译,如果有误导的地方,欢迎路过的老师,多提意见和指正,如果你想阅读英文原文,扫文末下方二维码或者跳转到指定链接就可以了的正文从这里开始...我知道，令人震惊的是，尤其是当你不是第一次码代码的人,或者你只是在那里维护它的时候有时候，这可能是一个吃力不讨好的工作。...或两者今天，我们要告诉你如何用手势创建一个本地菜单 ? 让羊驼走上舞台！所以，在我转向实际的代码之前，在那里有一些我想要经历的事情，所以请耐心等待 HTML结构 <!...(设置限制),也就是侧边栏菜单滑动的位置重叠计算(透明度变化,也就是用小数来计算,百分比值) 动画结束(菜单栏打开和关闭状态,菜单栏的位置) 以下是本文陌生词汇(仅供参考) 1.

1.8K4 0

前端性能优化之防抖与节流，大幅度降低你的事件处理性能

如何使用防抖？如何使用节流？什么时候需要用到防抖和节流？为什么要用防抖和节流？...那我们就围绕这几个问题来讲一讲防抖与节流的两个概念和简单应用吧~ 我会在正文中给大家逐个解答问题正文如果你不想看具体过程，也可以直接跳到总结，不过还是希望你慢慢看下去哦，因为这对你理解这两个操作很有帮助...那么防抖，就是我们滚动页面，刚要获取导航栏离文档顶部的距离，但是发现等会还要继续滚动，那么就先不获取了，等什么时候停止滚动了，再获取这个距离。...那么，节流就是，我们滚动页面，获取了一下导航栏离文档顶部的距离，此时我们一直在滚动页面，只不过我们刚获取过距离了，就先不获取了，等距离上一次获取几秒后，我们再获取一次吧。...因滚动事件频繁触发，再一次触发了滚动事件，获取一下现在的时间戳，判断一下，现在的时间戳减去上一次操作结束时的时间戳，发现时间相差小于1秒，所以不获取导航栏离文档顶部的距离，同时也不用给 last 重新赋值一个此时的时间戳

1.5K2 0

建站日志

TODO LIST 暂无 2021-08-23 添加打赏榜 2021-07-24 最近Waline评论被恶意攻击了，修改了配置：评论之前必须先注册登录评论需要经过审核才可发布 2021-06-05 菜单栏支持子菜单...2018-09-18 添加了图片懒加载插件hexo-lazyload-image 出于强迫症，还是关闭了不蒜子的统计功能，目的是为了解决下边的问题二。...2018-08-21 最近发现了两个问题：如果文章不写小标题，是不会生成文章目录的，如果启用了leancloud的阅读计数功能，这时候这篇文章的阅读页面的侧边栏就会失去affix.js的固定定位效果；...(该bug在火狐浏览器下偶尔会触发，在360浏览器下百分百触发) 如果启用了不蒜子计数，在360浏览器下如果滚动页面时，侧边栏的底部无法和正文模块的底部持平，侧边栏底部会比正文模块的短一些。...问题二对于强迫症来说很难受，要么关闭不蒜子计数，要么不使用360浏览器。

4.2K3 0

使用iPad将iPad用作Mac的第二台显示器

image Mac上菜单栏中的AirPlay图标，然后选择选项以连接到iPad。或使用 Sidecar偏好设置进行连接。 iPad现在应该显示Mac桌面的扩展。...要镜像Mac显示，使两个屏幕显示相同的内容，请返回AirPlay菜单，该菜单是 ? image 使用Sidecar时的蓝色矩形。选择用于镜像显示的选项。...---- 使用触控栏 Mac上的许多应用程序都具有Touch Bar控件，这些控件使常用操作更加容易。使用Sidecar，即使您的Mac没有触摸栏，您也可以在iPad屏幕上获得触摸栏。...---- 使用手势进行滚动和其他操作使用Sidecar时，iPad上的多点触摸手势仍然可用。这些手势在Sidecar中特别有用：滚动：用两根手指轻扫。复制：用三个手指捏住。...iPad不共享其蜂窝连接，而Mac不共享其互联网连接。

13.4K0 0

python测试开发django-134.CSS页面布局：左侧固定，右侧自适应布局

前言常见的后台管理页面，左侧固定宽度展示操作菜单栏，右侧显示左侧展示管理内容。这是一种最常见的左侧固定，右侧自适应布局方式。...左侧固定，右侧自适应布局在container1里面写2个div 左侧菜单栏...2 这是右边展示内容，右边展示内容，右边展示内容，右边展示内容，写正文看看这是右边展示内容，右边展示内容，右边展示内容，右边展示内容，写正文看看但一般不推荐这样做，需要多维护一个div元素。

9072 0

ps切图必知必会

忘得一干二净,非常苦恼,您将在本篇学会一些常用的奇淫绝技,完全可以胜任ps切图工作,今天,就我的学习和使用,跟大家分享一下自己的学习心得,如果你已经是老司机了,可以直接忽略,欢迎路过的老师,多提意见和指正正文从这里开始...ctrl-缩小,Alt+滚轮实现放大和缩小的操作) 简单操作过程如gif下所示,整个过程,清除辅助线,调出标尺(ctrl+R),信息(F8),即可,放大缩小(ctrl+,ctrl-)或者按住Alt键不放,滚动滚轮向上滚...(放大),向下滚,缩小,显示,隐藏图层因微信图片大小上传问题,可点击下方阅读原文进行查看如何从一张图片中切图,保存正确格式缩放(ctrl+放大),ctrl-缩小,或者按住Alt键不放,上下滚动鼠标滚轮...:按住空格键不放,上下拖动鼠标,可实现图片位置移动标尺(ctrl+R):辅助线进行精准定位矩形选框工具(从右下角往上拉,按住ctrl键,选中的区域),有时候,选框区(蚂蚁线)有多,有少,结合左上角菜单栏中的...web格式,进行图片存储格式选择图片格式(PSD / JPG/Gif/PNG)特点 psd(源文件),是直接没办法使用的 jPG/GIF/PNG(导出图)：存储的时候选择存储为web和设备所用格式,而不选择直接存储

2.9K2 0

android实现上滑屏幕隐藏底部菜单栏的示例

本篇文章引用github上一个仿今日头条项目，项目地址： https://github.com/iMeiji/Toutiao ，主要实现的功能是底部菜单栏随用户手势滑动而变化可见状态 ? ?...这次我们通过自定义这个behavior类，实现底部菜单栏的显隐性。...来看一下源码如何解释： ?...onStartNestedScroll：这个方法主要用于监听协调布局的子view的滚动事件，当此方法返回true，表示要消耗此动作，继而执行下面的 onNestedPreScroll 方法，我们在代码中返回的是...，滚动轴是不是竖直滚动轴。

2.1K3 1

offsetWidth,clientWidth的区别

scrollWidth，scrollHeight （对象的实际内容的宽度，不包边线宽度）对象左侧和顶部滚动的距离 scrollLeft，scrollTop...滚动大小 scrollWidth：没有滚动条的情况下，元素内容的总宽度； scrollHeight：没有滚动条的情况下，元素内容的总高度； scrollLeft : 被隐藏在内容区域左侧的像素距离...document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽...： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop;...网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高

6702 0

Dash应用页面整体布局技巧

本文示例代码已上传至我的Github仓库：https://github.com/CNFeffery/dash-master 大家好我是费老师，对于刚上手dash应用开发的新手朋友来说，如何进行合理且美观的页面整体布局构建是一道...示例2：粘性页首+内容布局在前面的示例1中，若页面内容区域较长，页首部分会随着用户滚动页面而被滚上去，如果我们希望应用中的页首部分一直紧贴页面顶端，就像下面的示例2所示：最简单的方式就是在前面示例...示例3：固定的侧边菜单栏+粘性页首+内容布局在前面的两个例子中，我们的页面中充当导航作用的只有位于页首右侧的一级导航菜单栏，如果我们的应用功能进一步复杂起来，需要在当前一级菜单栏对应页面下再设立二级导航菜单...2的基础上，将下方内容区域改造成基于fac网格系统的新布局即可：其中涉及到固定侧边菜单栏的部分，重点在于为菜单栏容器基于calc()动态计算高度值，即扣除页首高度之后的剩余部分，并通过overflowY...属性开启竖向滚动条，而最关键的固定效果则同样是基于AntdAffix实现的，只不过这里的offsetTop需要考虑页首部分高度，所以设置为64：本示例完整代码见文章开头附件地址中的app3.py。

4072 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭