使用js实现导航窗格在页面下拉以后固定在页面顶端

2023-11-08 07:48

本文主要是介绍使用js实现导航窗格在页面下拉以后固定在页面顶端,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用js实现导航窗格在页面下拉以后固定在页面顶端。

bootstrap中的组件可以实现导航栏固定在页面的最顶端,但是有些时候导航栏并不是在页面最顶端显示的,此时bootstrap组件就不适用了。经过多次测试,最终得到了这种简便方法,留存下来以便不时之需,也可以适时拿出来显摆一下,哈哈哈。。。

话不多说,直接上代码:

首先是HTML部分,当然要留出来第一个div,用来放一些标题之类的内容,随后就是导航栏,此处的container是bootstrap的栅格布局,懂的人自然懂,不懂也没关系,container、row、col-md-12这三个div删掉即可。

<div id="top">
<div><div class="container"><div class="row"><div class="col-md-12"><div id="nav"><ul><li><a href="#"> 首 页 </a></li><li><a href="#">产品中心</a></li><li><a href="#">品牌中心</a></li><li><a href="#">技术文章</a></li><li><a href="#">联系方式</a></li></ul></div></div></div>
</div>

接下来就是CSS样式布局了,没什么好说的,自己看代码吧。无非就是给导航栏加背景颜色显得更直观一些,在每个选项两边加上竖线,然后就是设置每个选项的超链接去掉下划线、字体颜色。最重要的一点就是,当页面下拉到导航栏之后,再往下拉,导航栏就要固定住了,此时就要用navcss这个样式来固定上边距为0。

#nav {width: 100%;background-color: #062C33
}#nav ul {height: 42px;width: 1000px;margin: 0 auto;
}#nav ul li {float: left;list-style: none;display: inline;
}#nav ul li a {border-left: 1px solid #014a52;display: block;height: 42px;line-height: 42px;color: #fff;font-size: 18px;text-decoration: none;padding: 0 30px;
}.navcss {position: fixed;top: 0px;
}

最后就是核心代码js部分啦:

$(document).ready(function() {$(window).scroll(function() {if($(window).scrollTop() > $("#top").height()) {$("#nav").addClass("navcss");} else {$("#nav").removeClass("navcss");}})
})

$(window).scrollTop() > $("#top").height()对于这条语句,讲的是判断下拉条的顶端位置和top这个div的起始高度进行对比,如果下拉条顶端位置等于小于div起始高度,就把navcss这个样式添加进来,否则就移除这个样式,所以就体现出了导航栏固定在页面顶端的特效。

总体就这些,算是比较简单的方法了,但不保证各个浏览器对这种方法的兼容性,但至少小博在谷歌和2345浏览器是完美运行的啦!

这篇关于使用js实现导航窗格在页面下拉以后固定在页面顶端的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/368635

相关文章

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

Java中使用 @Builder 注解的简单示例

《Java中使用@Builder注解的简单示例》@Builder简化构建但存在复杂性,需配合其他注解,导致可变性、抽象类型处理难题,链式编程非最佳实践,适合长期对象,避免与@Data混用,改用@G... 目录一、案例二、不足之处大多数同学使用 @Builder 无非就是为了链式编程,然而 @Builder

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

mybatis-plus QueryWrapper中or,and的使用及说明

《mybatis-plusQueryWrapper中or,and的使用及说明》使用MyBatisPlusQueryWrapper时,因同时添加角色权限固定条件和多字段模糊查询导致数据异常展示,排查发... 目录QueryWrapper中or,and使用列表中还要同时模糊查询多个字段经过排查这就导致只要whe

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

Python使用openpyxl读取Excel的操作详解

《Python使用openpyxl读取Excel的操作详解》本文介绍了使用Python的openpyxl库进行Excel文件的创建、读写、数据操作、工作簿与工作表管理,包括创建工作簿、加载工作簿、操作... 目录1 概述1.1 图示1.2 安装第三方库2 工作簿 workbook2.1 创建:Workboo

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5