jquery实现固定导航栏

最新推荐文章于 2020-06-26 15:06:45 发布
最新推荐文章于 2020-06-26 15:06:45 发布
阅读量2.1k 收藏 3
点赞数 3
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19880197/article/details/86693276
版权

HTML

<body>
    <div class="top" id="topPart">
        <img src="images/top.png" alt="">
    </div>
    <div class="banner" id="bannerPart">
        <img src="images/barnner.png" alt="">
    </div>
    <div class="main" id="mainPart">
        <img src="images/main.png" alt="">
    </div>
</body>

CSS

*{
    padding: 0;
    margin: 0;
}
.top{
    vertical-align: top;
}
.main{
    width: 1000px;
    margin: 0 auto;
    padding-top: 10px;

}
.fixed{
    position: fixed;
    top: 0;
    left: 0;
}

jquery

 <script src="jQuery/jque
最低0.47元/天 解锁文章
温柔女魔头
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
分享80个菜单导航JS特效，总有一款适合您
weixin_47730343的博客
12-04 996
分享80个菜单导航JS特效，总有一款适合您
JQuery 导航
Judian6974的博客
08-16 598
JQuery 导航祖先parent()：找到的是当前元素的父元素//找到自己的父亲 $("#myself").parent().css("background","red");parents()：找到的是当前元素的所有祖先元素 注：如果在小括号内传入参数，就可以找到你所指定的那一个父元素$(".myself").parents("[name='zhang']").css("background",
JQuery固定导航栏
qq_41276498的博客
06-26 819
代码 效果图 思路 1.顶部滚动条下到一定高度时（看不到导航栏） 2.固定导航栏，内容加间隔（margin），看起来更顺畅。 3.划上去时恢复原有状态。
运用jquery实现简单的顶部导航栏固定
weixin_45582846的博客
08-31 1133
运用jquery实现简单的顶部导航栏固定 以下是html代码： <!DOCTYPE html> <html> <head> <title>回到顶部</title> <link rel="stylesheet" type="text/css" href="style/index.css" /> <script...
jquery实现的导航固定效果
12-11
jquery实现的导航固定效果 代码如下:1.jquery代码, .nav为导航的class$(function(){ $(window).scroll(function() { if($(window).scrollTop()>=250){ $(“.nav”).addClass(“fixedNav”); }else{ $(“.nav”...
jQuery实现网页顶部固定导航效果代码
10-23
`#wrap`是固定导航栏的容器，设置了绝对定位（position:absolute）并设置了初始的顶部偏移量（top:2px）。`#wrap ul`和`#wrap ul li`则是导航条目列表和列表项的样式，分别设置了宽度、居中对齐和浮动等属性。 2. *...
jQuery实现仿百度帖吧头部固定导航效果
10-23
本教程将讲解如何使用jQuery来实现这样一个仿百度帖吧的头部固定导航功能。 首先，我们需要理解这个效果的核心原理。当用户向下滚动页面时，如果导航栏已经到达顶部，我们就将其设置为固定定位（`position: fixed`...
jQuery左侧固定导航栏点击滑动对应页面.zip
07-11
jQuery左侧固定导航栏点击滑动对应页面,一般我们在我们的企业网站或者商城网站都会有在线客服，一般使用qq的形式来展示，或者以网页的形式，一般企业网站在导航栏就会直接显示联系我们！php中文网推荐下载！
jQuery实现智能判断固定导航条或侧边栏的方法
10-21
主要介绍了jQuery实现智能判断固定导航条或侧边栏的方法,涉及jQuery针对页面元素属性的判断与动态操作相关技巧,需要的朋友可以参考下
css+jquery导航
08-09
用css和jquery做的导航，可以有N级子目录。下载后点击html文件可以查看效果。
jQueryUI横向导航栏
11-10
插件描述：基于jQueryUI的三级菜单导航栏，横向全屏，蓝色商务风格，简约大方。我们公司正在用这个插件。
jQuery小案例之固定导航栏
qq_43537987的博客
04-04 788
先来看一下效果： 代码部分： html 为展示效果方便，用三张图片代替，愿谅解。 <div class="top"> <img src="images/top.png" /> </div> <div class="nav"> <img src="images/nav.png" /> </div> <di...
jquery实现标题固定
summit_jie的专栏
09-25 303
导航固定 $(function(){   $(window).scroll(function() {    //控制达到多少px时固定 if($(window).scrollTop()>=50){ $(".nav").addClass("fixedNav"); //获取table2元素距离左边的距离 //动态添加给fixedNav元素 $("fixedN
jQuery 导航栏功能实现（高亮/相应菜单映射内容/无延迟二级菜单）
肉卷
09-20 4083
引入：导航栏的功能繁多，选取了几个常用的效果做个练手。 （忽然发现jQuery真的巨好用。。。对于新手的我，造轮子什么的，相当痛苦。我还有救么。。） 好了，总结完睡觉去了。 很多废话，看实现方法和代码就好了 功能1：鼠标滑过菜单高亮显示 实现方法：CSS ：hover伪类 一般来说，用户只是在选择进入某一菜单时（未点击）会用到此功能。所以实现起来简单。 功能2：鼠标点击后，菜单保持高亮并跳转到相...
jQuery实现固定导航栏效果
机器猫不吃鱼的博客
09-17 1073
jQuery实现固定导航栏效果： 固定导航栏效果 *{ margin: 0; padding: 0; } body{ text-align: center; } .fixed{ top: 0; left: 0; position: fixed; } $(document).ready(function(){ // 入口函数 $(w
利用JQuery实现简单的菜单栏导航
lhf294的博客
08-10 1466
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } #top{width:
jQuery实现下拉菜单
sleepwalker_1992的专栏
05-17 7424
html文件&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&lt;/title&gt; &lt;link rel="stylesheet" type="
JQuery实现fixed固定div--同固定表头
weixin_30764137的博客
04-13 109
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <he...
jquery实现淘宝精品案例
温柔女魔头
01-25 2233
HTML &lt;div class="wrapper"&gt; &lt;ul id="left"&gt; &lt;li&gt;&lt;a href="#"&gt;女包&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&amp
jQuery实现侧边导航栏固定
最新发布
03-29
3. 在滚动事件中获取导航栏的位置和距离窗口顶部的距离，并判断是否需要固定导航栏 4. 如果需要固定，则给导航栏添加一个"fixed"的class，并设置其position为fixed，top值为0 5. 如果不需要固定，则移除"fixed"的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值