如何实现顶部导航位置固定

最新推荐文章于 2023-04-13 15:54:20 发布
最新推荐文章于 2023-04-13 15:54:20 发布
阅读量536 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_10306/article/details/82543784
版权
经理说让我研究一下类似新浪的顶部导航固定的实现方式，刚开始有些迷茫？是要用js实现吗？隐隐又感觉应该用css就能实现。于是把新浪的首页另存下来，用FireBug看了一遍，原来最终的效果实现只有一行普通的代码呀：position:fixed;
oh,my god! 如此的简单却又如此的惊艳。对于不懂css的我来说真是有些欣喜呀。
自己动手一试，果真如此。哈哈，我成功了
iteye_10306
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现网页顶部固定导航效果代码
10-23
总结起来，这个示例通过jQuery监听滚动事件，动态地调整导航栏的位置，实现网页顶部的固定导航效果。同时，还展示了如何使用jQuery操作DOM元素样式、处理事件以及实现简单的交互效果。这样的技术在现代网页开发中...
滚动页面，实现导航栏固定在顶部（吸顶效果）
了解—学习—进步—满足
09-10 7859
1、首先最简单的，是利用position的sticky属性 sticky 页面不动的情况下，它就像 position:relative; 而当页面滚动超出目标区域时，它表现的就像 position:fixed;，会固定在目标位置。 relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置也不会受到影响。 而fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标并不是body，而是视图（屏幕内的网页窗口）本身。
【小程序】固定导航栏在顶部，跟随下滑
Z_hongli的博客
11-17 2709
【小程序】固定导航栏在顶部，跟随下滑一、效果演示二、实现原理三、相关代码1.说明（一定要看）1.wxml2.wxss3.js 一、效果演示 二、实现原理 在js中有一个函数是用来监听页面的滑动的，这个函数叫做onPageScroll，下面是我从官网上面查到的有关信息 我们可以利用这个函数的功能，获取页面在垂直方向已经滚动的距离，当滚动的距离达到一定数值时，我们通过js来改变样式，让原有的模块固定住不再移动 三、相关代码 1.说明（一定要看） 我把整个页面的代码全部拷过来了，wxml中最上面的部分是导航栏
固定导航栏的实现原理
iteye_4180的博客
08-21 881
第一种：设置body｛padding-top:导航栏的高度｝，然后直接设置导航栏position:fixed即可（实现简单）。 第二种（看别人的实现方式）：采用双导航栏，一个绝对定位，一个固定定位。并将绝对定位的导航栏的z-index属性值设置的比固定定位的导航栏的大。 例如： 绝对定位：position:absolute;z-index:2;top:0px; 固定定位：positio...
【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-13 6146
一、核心要点分析 1、顶部导航栏要点 2、固定定位垂直居中设置 二、代码示例
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
热门推荐
juxiaozheng的博客
05-11 1万+
一、使用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
jquery实现固定顶部导航效果(仿蘑菇街)
10-27
蘑菇街导航固定顶部的效果想必大伙有所关注吧，想实现吧，本文将带你走完实现之旅，接下来的代码是使用jquery，感兴趣的各位可不要错过了哈
jquery实现导航固定顶部的效果仿蘑菇街
10-25
主要介绍了jquery实现导航固定顶部的效果，仿蘑菇街的，感觉还不错，下面将实例与大家分享下
顶部固定导航菜单特效代码
03-20
顶部固定导航菜单代码基于jQuery实现，导航菜单始终在...鼠标滑动滚动条时，导航固定顶部，并且滚动到对应 的栏目菜单时，当前导航高亮显示；点击导航文字时平滑跳转到对应的栏目板块。有二手车旗舰店、车源保证、价
Bootstrap实现渐变顶部固定自适应导航栏
08-31
在本文中，我们将深入探讨如何使用Bootstrap来创建一个具有渐变顶部、固定位置且自适应屏幕大小的导航栏。 首先，我们来看HTML结构。在Bootstrap中，导航栏通常由`<nav>`元素包裹，这里使用了`navbar-fixed-top`类...
CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏
04-09
NULL 博文链接：https://liujinghao.iteye.com/blog/1630713
固定导航浮动在顶部效果html代码
08-06
单一一个固定导航浮动在顶部效果html源代码，导航固定在顶部，浮动在最上层，不随页面的下拉而改变。
【JavaScript】 - 滚动固定导航栏
m0_55960697的博客
03-31 2833
黄色箭头指向 滚动条 黑色箭头指向 导航栏 没有滚动 之前 导航栏没有固定在顶部 任务是：随着滚动条滚动到一定位置 导航栏固定 顶部 dispaly：fixed 以下代码的 display 样式 已经配置，只需要添加一个类名就行 .fixed window.addEventListener('load', function() { // 获取元素navBar，后期需要获取它离页面顶部的距离，同时满足条件之后还要为其设置fixed样式 le...
固定导航栏（头部、底部、左边等）
H1453571548的博客
08-29 4209
固定导航栏在左边 固定导航栏在头部 固定导航栏在底部
页面滑动到一定的位置，让导航固定在顶部
weixin_43478869的博客
01-24 7047
我使用了两种方法 先介绍jQuery的 这个的代码少 监听滚动事件 $(window).on("scroll",function(){ //判断向下滑动的距离 if($(window).scrollTop()&gt;=100){ //将顶部导航栏固定 $(".nav"...
固定顶部导航栏完整解决方案
布丁黑板报
03-20 1万+
不少朋友想修改成新浪微博那种固定在浏览器窗口顶部的样子，其实很简单。 第一步，固定顶部导航栏 　　其实只需要给导航栏的div增加一个position属性，编辑/theme/sample-blue/base.css文件，在 .header{} 　　加入 position: fixed;z-index:999999; 　　position实现了固定，z-index 使导航
CSS：如何实现顶部、底部的固定菜单
weixin_34334744的博客
11-21 1804
2019独角兽企业重金招聘Python工程师标准>>> ...
关于position: fixed学习，顶部固定导航
明仔丶的博客
12-16 8671
关于position: fixed学习，顶部固定导航
html网页怎么实现顶部导航栏固定一半
最新发布
05-23
要实现顶部导航栏固定一半，可以通过CSS的position属性来实现。具体做法如下： 1. 先给导航栏添加position: fixed;属性，使其固定在顶部。 2. 然后设置导航栏的高度，如height: 50px;。 3. 再设置导航栏的top值为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值