滑动导航栏固定

最新推荐文章于 2024-01-01 14:36:58 发布
最新推荐文章于 2024-01-01 14:36:58 发布
阅读量318 收藏
点赞数
分类专栏： js特效 文章标签： 导航栏 滑动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动导航栏固定</title>
<style type="text/css">
  *{padding: 0px;margin: 0px;}
  .home_top{height: 400px;background-color: #4BC5F2;text-align: center;font-size: 24px;line-height: 400px;}
  #mainMenuBar{width: 100%;height: 100px;background-color: #D4C76D;text-align: center;font-size: 20px;line-height: 100px;border-bottom: 1px solid #000;}
  .content{height: 1200px;background-color: #F7CAA6;text-align: center;padding-top: 50px;font-size: 36px;}
  .stick {position: fixed;top: 0;}
</style>
</head>
<body>
<div id="wrapper">
  <div id="container">
    <div class="home_top">header_top</div>
  </div>
  <div id="mainMenuBarAnchor"></div>
  <div id="mainMenuBar">menu_nav</div>
  <div class="content">content</div>
</div>
<script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script> 
<script style='text/javascript'>
  $(document).ready(function() {
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');
       
        // Run this on scroll events.
        //scroll()
        //当用户滚动指定的元素时，会发生scroll事件。
        //scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）
        //scroll()方法触发scroll事件，或规定当发生scroll事件时运行的函数
        $window.scroll(function() {
          //scrollTop()方法返回或设置匹配元素的滚动条的垂直位置
          var window_top = $window.scrollTop();
          //javascript用offsetTop();jquery用offset().top;
          var div_top = $mainMenuBarAnchor.offset().top;
            if (window_top > div_top) {
              // Make the div sticky.
              $mainMenuBar.addClass('stick');
              // $mainMenuBarAnchor.height($mainMenuBar.height());
            }
            else {
              // Unstick the div.
              $mainMenuBar.removeClass('stick');
              // $mainMenuBarAnchor.height(0);
            }
          });
  });

</script>
</body>
</html>

一梦醉殇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
固定导航栏
sunny的博客
03-11 303
显示效果图：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * { padding: 0; margin: 0;
vue实现点击按钮控制可滑动的导航栏
nemophilst的博客
07-07 1235
实现逻辑：当`scrollLeft`方法被调用时，它会获取到包含日期导航栏的容器元素`.data_bar`，然后使用`scrollTo`方法来设置容器的滚动位置。1. 使用`document.querySelector('.data_bar')`获取到包含日期导航栏的容器元素`.data_bar`。类似地，`scrollRight`方法执行的操作也类似，但是它是通过将`.scrollLeft`属性增加一个可视宽度的距离来将容器向右滚动。实现效果：点击左箭头导航栏向左移动，点击右按钮导航栏向右移动。
html+css实现固定导航栏
芊嵛
12-07 1847
为什么搜索那么多方式都不能用，又乱又杂，我不信邪，自己总结写了一种固定导航栏的方式，希望能帮到你。
智慧导航：教你轻松使用Javascrip实现网页固定导航栏功能
m0_55392280的博客
11-14 1426
本文通过 JavaScript 代码实现导航栏滚动指定位置就固定，固定导航栏不仅提高了用户体验，还有助于突出网站或小程序的层次结构和功能模块。
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
热门推荐
juxiaozheng的博客
05-11 2万+
一、使用css直接用固定定位position: fixed。 适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。 示例代码： <style> *{ margin: 0; padding: 0; } p{ height: 500px; } section{ padding-top: 40px; } div{ height: 40px; width: 100%; color: white; background-color: crims
滑动导航栏
钱辉
12-03 636
一个简单的滑动导航栏,拿来就用的那种 <div class='navsSlider'> <ul> <li><a href="javascript:void(0)">首页</a></li> <li><a h...
横向滑动导航
08-11
此外，ViewPager还支持添加头部和尾部视图，使得在顶部或底部添加固定导航栏成为可能。 在"顶部横向导航栏的效果"中，ViewPager经常被用作实现这种效果的主要工具。通常，顶部的导航栏会包含一系列的图标或文字，每...
jQuery左侧固定导航栏点击滑动对应页面.zip
07-11
jQuery左侧固定导航栏点击滑动对应页面,一般我们在我们的企业网站或者商城网站都会有在线客服，一般使用qq的形式来展示，或者以网页的形式，一般企业网站在导航栏就会直接显示联系我们！php中文网推荐下载！
JS滚动到指定位置导航栏固定顶部
10-19
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享
导航栏滚动到顶部后固定
07-16
在网页设计中，"导航栏滚动到顶部后固定"是一种常见的用户体验优化技术，它被称为Fixed Navigation或Sticky Navbar。这种设计使得用户在浏览长页面时，无论页面如何滚动，导航栏始终保持在屏幕顶部，便于用户随时...
CSS实现导航固定的、左右滑动的滚动条制作方法
11-20
在网页设计中，创建一个固定在顶部且支持左右滑动的导航栏是一个常见的需求，尤其在移动设备上，这样的设计可以有效地节省屏幕空间并提供良好的用户体验。本文将详细讲解如何使用CSS来实现这一功能。 首先，为了...
手把手教你超可爱的导航栏
小丞同学
05-27 2842
嘿！大家好哇，手把手带大家做一个超可爱的导航栏，真的超简单噢，拿好小本本记笔记吧！
固定导航栏（头部、底部、左边等）
H1453571548的博客
08-29 4249
固定导航栏在左边 固定导航栏在头部 固定导航栏在底部
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
m0_71491195的博客
07-20 1万+
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
【前端基础系列】CSS篇-带你了解position:sticky
Web面试那些事儿的博客
01-01 2621
如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是staticrelativeabsolutefixed，实际上MDN上还有一个sticky。今天我们就来给大家介绍这个容易被忽视的position属性值sticky。先来看看MDN上对于sticky的介绍：粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。粘性定位可以被认为是相对定位和固定定位的混合。什么是结合两种定位功能于一体呢？
uniapp 实现滑动视图切换 顶部滚动导航栏
qq_55272229的博客
08-09 5321
无论小程序的时候一般有这个功能,在页面处于首页时候,滑动视图,切换视图顶部滚动导航也跟着切换 1.想要实现这个功能就需要实现顶部导航栏,首先实现顶部滚导航栏 点击高亮颜色显示 模板代码 <scroll-view scroll-x="true" class="scroll-content" > //滑动导航栏数组 <view v-for="(item,index) in topBar" :key="index" class="scroll-item" > <text
开题报告达达宠物认领信息网站的设计与实现 已通过开题答辩的.docx
最新发布
07-25
宠物认领信息网站的主要目的是为寻找宠物的失主和寻找新家的宠物提供一个在线的信息交流平台。通过这个平台，失主可以发布失宠信息，寻找走失或遗弃的宠物；而救助人或组织则可以发布待领养的宠物信息，为那些无家可归的宠物寻找一个永久的归宿。 这样的网站通常会提供一个详细的宠物数据库，包括照片、品种、年龄、健康状况等信息，以便让失主能够方便地找到自己的宠物。同时，网站还会提供一些相关的服务，如失主与救助人之间的在线交流、宠物匹配推荐、领养手续办理等，以帮助双方顺利完成宠物的认领和领养过程。 宠物认领信息网站的目的在于提高失宠找到宠物的几率，减少流浪宠物的数量，并为那些无家可归的宠物提供一个温馨的新家。同时，网站还能促进社会对流浪宠物的关注和保护，提高人们的动物保护意识。
开题报告创权法律服务系统 已通过开题答辩的.doc
07-25
进入20世纪80年代，我国加快了改革开放的步伐，市场经济体制已逐步形成，我国的经济发展受世人所瞩目，但法律法规的置后，使经济发展不规范问题暴露的相当严重，特别是社会整体信用的缺失，使消费环境不断恶化。而如今随着城镇化的高速推进，精神追求远不及物质发展迅速，维权问题也越来越成为人们十分关注的社会话题。 维权是指维护个人或群体的合法权益，范围包括人身损害、土地纠纷、 医疗事故、婚姻、家庭、继承等民事纠纷所进行的行政及司法诉讼。维护消费者合法权益关系着全社会每个人的利益，群众利益无小事。维护消费者合法权益正体现着“权为民所用，利为民所谋”。而现如今由于法律规则的不完善加上自身对法律知识的不了解，导致很多公民的权益问题在复杂的社会情况下无法得到妥善的解决，使得公民的财产和心理受到难以弥补的损失，严重威胁到社会的安全与稳定，公民之间的诚信与统一。因此更便捷、迅速地维护公民的合法权益，已经成为了一个刻不容缓去解决的社会问题。
uniapp上方滑动导航栏
09-02
在 UniApp 中实现上方滑动导航栏可以通过使用 `uni-app` 组件库中的 `uni-nav-bar` 组件来实现。以下是一个简单的示例代码: ```html title="标题" :fixed="true" :background-color="navBarColor" :front-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值