基于jQuery实现定位导航位置效果


Posted in jQuery onNovember 15, 2017

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动,并且点击导航条跳转到内容所在的位置;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    *{
      padding: 0;
      margin: 0;

    }
    .left{
      float: left;
      padding: 0 0 328px 0;
    }
    .left div{
      width: 800px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      font-size: 30px;
      background: gray;
      margin: 10px 0;
    }
    .nav{
      position: absolute;
      right:20px;
      top: 20px;
    }
    .nav div{
      width: 100px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background: pink;
      margin: 10px 0;
      cursor: pointer;
    }
    .bottom{
      overflow: hidden;
      width: 100%;
      position: relative;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <img style="width:100%" src="o_1bsmo1kpn1hp61bm0176i1bk618uo9.jpg" alt="">
  <div class="bottom">
    <div class="left">
      <div class="one leftDiv" id="one">
        一
      </div>
      <div class="conOne leftDiv" id="two">
          二 
      </div>
      <div class="leftDiv" id="three ">
        三
      </div>
      <div class="leftDiv" id="four">
        四
      </div>
    </div>
    <div class="nav">
      <div class="one navDiv">one</div>
      <div class="two navDiv">two</div>
      <div class="three navDiv">three</div>
      <div class="four navDiv">four</div>
    </div>
  </div>
  <script src="jquery.js"></script>
  <script>
    $(window).scroll(function(e){
      console.log($(window).scrollTop());
      if ($(window).scrollTop() >$('#one').offset().top) {
        $('.nav').css({'position':'fixed'});
      console.log('ss');
      } else{
        $('.nav').css({'position':'absolute'});
      }
    })
    $('.nav div').click(function(){
      var i = $('.navDiv').index(this);
      var x = $('.leftDiv').eq(i).offset().top;
      $('html, body').animate({scrollTop:x+'px'},500);
    })
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中的deferred使用方法
Mar 27 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
You might like
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python3 简单实现组合设计模式
2020/07/02 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
酒店总经理工作职责
2013/12/13 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
节能减排倡议书
2014/04/15 职场文书
航空学院求职信
2014/06/11 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2014年评职称工作总结
2014/11/20 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
写给老婆的保证书
2015/02/27 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书