基于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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery插件实现代码雨特效
Apr 24 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正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
javascript关于继承解析
2016/05/10 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
js控制随机数生成概率代码实例
2019/03/21 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python isinstance函数介绍
2015/04/14 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python中set()函数简介及实例解析
2018/01/09 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
安全保证书
2015/01/16 职场文书
上课说话检讨书
2015/01/27 职场文书
地球一小时活动总结
2015/02/27 职场文书
网络销售员岗位职责
2015/04/11 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
nginx请求限制配置方法
2021/07/09 Servers
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
Mysql数据库group by原理详解
2022/07/07 MySQL