基于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弹幕效果
May 06 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
基于jquery的表格排序
2010/09/11 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
浅谈javascript的调试
2015/01/28 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
vue3.0 上手体验
2020/09/21 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
财务助理岗位职责
2013/11/10 职场文书
环保志愿者活动方案
2014/08/14 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
颐和园导游词400字
2015/01/30 职场文书
求职信格式范文
2015/03/19 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书