根据浏览器的滑动条 固定导航栏

固定导航栏

前言:很多网站都有这种网页的效果:滑动浏览器右侧的滚动条,导航栏会一直处于最上方

下面我就来简单实现以下这个功能


一.首先我们来写一下html的结构:

1 <div class="top" id="top"></div>
2 <div class="nav" id="nav"></div>
3 <div class="main" id="main"></div>

  二.我们来简单写一下样式

   这个结构可以说是简单明了,由三部分组成  顶部  导航栏 还有主体部分

  但是我们并不打算继续写下去  我们简单的用样式表达一下  用颜色划分区域 这个是练习的好方法

   

 1 <style>
 2         .top {
 3             height: 200px;
 4             width: 100%;
 5             background-color: #f00;
 6         }
 7         .nav {
 8             height: 150px;
 9             background-color: skyblue;
10             width: 100%;
11         }
12         .main {
13             margin-top: 100px;
14             height: 1000px;
15             width: 100%;
16             background-color: black;
17         }
18     </style>

    三.接着我们来写一下js的代码

    

 1 window.onscroll = function () {
 2         if (getScroll().top >= my$("top").offsetHeight){         //利用定位使其固定 脱标
 3             my$("nav").style.position = "fixed";
 4             my$("nav").style.top = 0;         //设置main 的 margintop  防止由于nav的脱标 main 整体向上移动 而造成下拉过程并不流畅的效果
 5             my$("main").style.marginTop = (my$("nav").offsetHeight + 100) + "px";
 6         }
 7         else {          //取消设置的东西 然后恢复成原来的样子
 8             my$("nav").style.position = "";
 9             my$("main").style.marginTop = "100px";
10         }
11     }

原文地址:https://www.cnblogs.com/Lzxgg-xl/p/10257693.html

时间: 2024-10-07 23:18:29

根据浏览器的滑动条 固定导航栏的相关文章

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

引用:https://www.cnblogs.com/till-the-end/p/8935152.html 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的

手机端左侧固定导航栏推出效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-

iOS Swift&amp;OC 模仿主流App 实现滑动视图隐藏导航栏

简单直接上图上代码 -.- 一个GIF图5M? @property (nonatomic, strong) UITableView *tableViewScroll; @property (nonatomic, assign) double recordDistance; //记录滑动的距离 @property (nonatomic, strong) UIView *customView; @property (nonatomic, strong) UIButton *btn; 创建所需要的视图

固定导航栏案例

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } img { vertical-align: top; } .main { margin: 10px auto 0; width: 1000px; } .fixe

微信小程序--仿京东UI样式顶部导航栏

我们先来看看京东的效果 分析 上端导航栏可以放置多个分类,可滑动 点击导航栏最右端按钮可以查看所有分类,同时背景模糊 内容部分右拉跳转到另外的分类 点击分类时导航栏的滑动部分自动滑动到合适的位置 我的实现 代码展示: js /** * categoryView.js - 分类页面 */ var fakeData = require('../../common/fakeData.js') Page( { data: { categories: ['全部'], currentTab: 0, scro

一些关于iOS系统导航栏与自定义导航栏的事情

关于系统导航栏是真的让人又爱又恨,爱的是苹果本身对这个控件的封装已经是很完美了,包括内存.美化.渐变动画等等,一般来说,基本上所有需求都可以满足的.但是你要知道什么东西到了中国,就会发生翻天覆地的变化,例如后台的数据并发.在国内奇葩的产品设计之下,导航栏也是面目全非,反正我看了比较著名的APP,发现他们的导航栏基本都是自定义,其中牵扯最大的问题就是导航栏自身的隐藏.颜色渐变. 其实通过APP运行时,你可以看到系统NavigationBar的分层.一个navigationBar是分很多层的,并非我

iOS 超 Easy 实现 渐变导航栏

接着上周的项目, 在上周我别出心裁的在自定义TabbarController中加入了自定义转场动画, 受到了大家广泛的喜爱, 再次表示感激, 今天我们继续实现LifestyleViewController的第二个功能渐变导航栏!! 渐变导航栏, 现在很多项目里都有这个功能, 我们就把这个功能集成到我们的项目中来; 根据设计图纸需求, 我们需要在轮播图下面有一个搜索栏, 搜索栏根据滑动偏移到导航栏之上. 具体怎么实现呢, Easy啦~ 不急,我们一步一步来. 创建搜索栏Cell 首先打开我们的项目

Css之导航栏学习

Css: ul { list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:blue; /*固定在顶部*/ position:fixed; top:0; width:100%; } li { float:left; } /* 出来最后一个选项(last-child) 其他的都添加分割线 */ li { border-right: 1px solid #bbb; } li:last-child { b