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

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery仿京东商城楼梯式导航定位菜单

    jQuery仿京东商城楼梯式导航定位菜单

    实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></

  • jQuery网页定位导航特效实现方法

    本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加

  • jQuery导航条固定定位效果实例代码

    jQuery导航条固定定位效果实例代码

    实现效果图: 向下滑动时,导航栏固定 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; margin: 0 auto; } img#search

  • 基于JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱淘气购物网-JQuery网页定位导航特效</title> <style> /*All tag*/ html, body, div, ul, li, img

  • jquery实现网页定位导航

    jquery实现网页定位导航

    不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示.今天我就来讲讲这样的效果是如何实现的. 先贴上显示效果: 实现:  这个的页面布局很简单,大家下去多试试就OK了,值得注意的是需要在菜单布局里的每一个li里面添加a标签并且给a标签的 href 赋上对应的id号,可以让其点击立即跳到id对应的内容 然后就是jquery是如何实现的: 1.我们需

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

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动,并且点击导航条跳转到内容所在的位置: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

  • 基于jQuery实现图片推拉门动画效果的两种方法

    ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

  • jQuery实现定位滚动条位置

    jQuery实现滚动条滚动到子元素位置(方便定位) 关键代码如下所示: <div class="of-y" id="nurse" > <table class="high width" id="nurse-plan"> <tr id="tr-one"></tr> <tr id="tr-two"></tr> <t

  • 基于jquery实现省市区三级联动效果

    基于jquery实现省市区三级联动效果

    本文实现更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们. JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 说明:数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"&g

  • 基于jquery的手风琴图片展示效果实现方法

    基于jquery的手风琴图片展示效果实现方法

    本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: 复制代码 代码如下: <!DOCTYPE html> <html class=''> <head>     <title>一款基于jquery的手风琴图片展示效果demo</title>     <style class="cp-pen-styles">

  • jquery实现的导航固定效果

    jquery实现的导航固定效果 复制代码 代码如下: 1.jquery代码, .nav为导航的class$(function(){   $(window).scroll(function() { if($(window).scrollTop()>=250){  $(".nav").addClass("fixedNav"); }else{  $(".nav").removeClass("fixedNav"); }   })

  • jQuery实现的导航动画效果(附demo源码)

    jQuery实现的导航动画效果(附demo源码)

    本文实例讲述了jQuery实现的导航动画效果.分享给大家供大家参考,具体如下: 经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上. 效果如下图: 利用jquery的 animate 函数,很好实现.代码很简单! 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <scrip

  • 基于jquery实现的树形菜单效果代码

    基于jquery实现的树形菜单效果代码

    本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • 基于jQuery实现的菜单切换效果

    基于jQuery实现的菜单切换效果

    这是一个非常流畅的菜单展示效果,应用在亚马逊上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉.这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果. HTML 首先建立主菜单,我们借用电商网站常见的商品分类.其html结构代码如下,其中我们用到了html5的data-submenu-id属性设置,这在插件调用时非常有用. <div class="active"> <ul class=&

随机推荐