开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使正文不滚动菜单栏

要使正文不滚动菜单栏，可以通过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监听页面滚动事件，根据滚动距离为菜单栏和正文内容添加相应的样式。

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

有帮助

没帮助

相关·内容

css补充、JavaScript、Dom

css补充: position: fixed：可以将标签固定在页面的某个位置 absolute+relative：通过两者的结合可以让标签在一个相对的位置代码例子：（通过fixed标签将某些内容固定

08

动手练一练，手写一个价格对比、固定表头滚动的表格

大家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。虽然有不少相关插件提供了类似的功能，比如 ScrollMagic.js，但是今天的实例，我们将用纯原生的方式进行实现，当滚动条滚动至表格位置，固定表头位置，表格内容查看完后，取消固定表头的功能。

03

JavaScript之DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

04

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

演示效果自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page">

03

从零开始学 Web 之移动Web（四）实现JD分类页面

如下面的结构：大盒子1和大盒子2分为上下结构，小盒子3和小盒子4在大盒子2的内部，分为左右结构。

03

控制页面的滚动:自定义下拉到刷新和溢出效果

通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini(胡迪宁),也就是css中也可以写变量等知识,如果文有误导的地方,欢迎路过的老师拍砖指正

02

动手练一练，做一个现代化、响应式的后台管理首页

📷 作为一个前端开发者，我们或多或少都会接触后台管理系统的制作，你是否会亲自动手做还是从网上找源码改一个呢？今天我们将从零开始纯手工制作一个后台管理面板的首页，通过这个案例的学习你将会学习到如何制作一个响应式后台管理页面的思路，本篇文章内容比较长，请大家多多包涵，希望你能看下去，😁😁😁。这篇文章的内容是基于我阅读国外一篇博文内容的整理，并非完全直接翻译，由于水平有限，难免有限疏漏，欢迎大家指正一、首先明确下界面需求 1、屏幕宽度 >767px 时，界面交互如下视频所示：界面的菜单可以通过点击左下角

00

动手练一练，做一个现代化、响应式的后台管理首页

大家好，今天我们将一起从零开始纯手工建一个后台管理首页。关于后台管理模板，每个公司的要求都不一样，有的能用就行也丑不丑无所谓，或者用个开源模板凑合下就行啦。如果接到这样后台管理需求，我也是从网上下载改改而已，从没想过自己动手建一个。因为从零开始建一个漂亮完善的后台管理模板实在太费功夫了，交互样式的代码量不亚于业务代码的工作量。

00

动手练一练，做一个响应式的后台管理面板

作为一名前端开发者，我们或多或少都会接触后台管理系统的制作，你是否会亲自纯手工制作做还是从网上找源码改一个呢？今天我们将从零开始纯手工制作一个后台管理面板的首页，通过这个案例你将会学习到如何制作一个响

01

18.CSS

选择器 1.标签上直接设置style属性

直接标签里面写

2.id选择器 <style> #i1{ color: green; } </style> </head> <body>

以#开头命名

</body> 3.class选择器 <style> .c1{ color: green; }

07

iPhone X 适配手Q H5 页面通用解决方案

基于JS实现回到页面顶部的五种写法(从实现到增强)

使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置

02

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

本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下文中的gif图所示),主要涉及的知识点有移动端三大触摸事件(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js的方法封装点击,移动,抬起功能函数,尽管移动(手机)端与pc端有很多相似之处,但还是有很多要注意的地方的,如果你想获得该Demo的源码,复制该标题后台回复[手势魅力-设置一个触摸菜单]就可以了的,初次翻译,如果有误导的地方,欢迎路过的老师,多提意见和指正,如果你想阅读英文原文,扫文末下方二维码或者跳转到指定链接就可以了的

04

移动端吸顶fixbar解决方案

在IOS端，使用 position： sticky 这个属性，使用类似于 position: relative 和 position: absolute 的结合体。在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

03

前端学习笔记之CSS知识汇总 CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

03

前端之CSS内容

一、CSS介绍 CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二、CSS语法 1

兼容iphone x * 刘海的正确姿势

9月13日凌晨终于等来了万众瞩目的苹果新品发布会，相信很多小伙伴们都期待新 iphone 可以剪掉刘海胡子，但万万没想到的是等来了三款不同的尺寸的 iphone x ，我的天，等了这么久你给我看这个？码农慌得一批满地找新 iphone 的逻辑像素，然后想着怎么兼容这刘海和胡子。

03

【前端词典】4 种滚动吸顶实现方式的比较

我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。

06

JS实现无限分页加载——原理图解

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。有很多网站使用无限分页的模式，即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型，讲述其中奥妙。原理图实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。因此，可能会出现两种情况： 1 当页面的内容很

css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

左侧nav栏目，要固定也要用fixed。不过固定定位的元素要想高度百分百，可以使用top+bottom对应方位值的拉伸效果：

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭