页面:
    <div class="pa">
        <div class="w-95-sl bdl-2"><a>标题1</a></div>
        <div class="w-95"><a data-index="_kfmessage">标题2</a></div>
        <div class="w-95"><a data-index="_ctmessage">标题3</a></div>
        <div class="w-95"><a data-index="_jtaddress">标题4</a></div>
        <div class="w-95"><a data-index="_sjimage">标题5</a></div>
        <div class="w-95"><a data-index="_cdintroduce">标题6</a></div>
        <div class="w-95" style="width: 146px"><a data-index="_cdfacility">标题7</a></div>
        <div class="clera">
    </div>

浮动样式:
    .fixedNav{ position:fixed; position:fixed ; left:50%; top:0px; z-index:1000; margin-left:-501px; margin-top:0px; }
    
浮动javascript:
    <script type="text/javascript">
        $(function myfunction() {
            var offsetTop = $(".pa").offset().top;
            $(window).scroll(function () {
                var _top = $(document).scrollTop();
                if (offsetTop < _top) {
                    $(".pa").addClass("fixedNav");
                } else {
                    $(".pa").removeClass("fixedNav");
                }
            })
        });
    </script>
锚点滚动javascript:
    <script type="text/javascript">
        $(function () {
            $(".pa a").click(function () {
                //$(this).siblings().removeClass("current");
                //$(this).addClass("current");
                var el = $(this).attr('data-index');
                $('html, body').animate({
                    scrollTop: $("#lab" + el).offset().top - 50
                }, 500);
            });
        });
    </script>

鼠标滚动div固定浮动-加锚点的更多相关文章

  1. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  2. js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  3. 如何用jQuery实现在鼠标滚动后导航栏保持固定

    要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...

  4. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  5. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 让div固定在顶部不随滚动条滚动【转】

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  8. 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...

  9. 纯css,div隐藏滚动条,保留鼠标滚动效果。

    示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...

随机推荐

  1. Rdlc报表 数据汇总分组展示

    1.从工具箱拉出表或者矩阵(本次使用的是矩阵) 2.选择需要的数据集,没有就新建一个数据集,名称自己起好,下面有用到 3.将行组和行列显示出来(右击报表--试图=>) 4.双击行组下的RowGr ...

  2. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  3. android面试题

    1. 请描述一下Activity 生命周期. 答: 如下图所示.共有七个周期函数,按顺序分别是: onCreate(), onStart(), onRestart(), onResume(), onP ...

  4. jupyter nb + scite 混合搭建成我的最爱IDE

    jupyter nb + scite 混合搭建成我的最爱IDE 自从体验过jupyter notebook之后, 就深深地爱上了你, jupyter. jupyter这个名字也很古怪的. 它应该是ju ...

  5. Media Player插件

    <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" ...

  6. maven工程使用spring-boot-devtools进行热部署,更改代码避免重启web容器

    spring-boot-devtools 是一个为开发者服务的一个模块,其中最重要的功能就是自动应用代码更改到最新的App上面去.相关Blog: 点击打开链接 原理是在发现代码有更改之后,重新启动应用 ...

  7. mysql - 数据库、表 的创建

    -- 创建数据库 CREATE DATABASE IF NOT EXISTS ibs_environ DEFAULT CHARACTER SET utf8; -- 切换数据库 USE ibs_envi ...

  8. Forward和Redirect的区别

    一:间接请求转发(Redirect) 二:直接请求转发(Forward) 用户向服务器发送了一次HTTP请求,该请求可能会经过多个信息资源处理以后才返回给用户,各个信息资源使用请求转发机制相互转发请求 ...

  9. 不注册Tomcat服务,运行Tomcat不弹出JAVA控制台窗口

    http://blog.csdn.net/yangholmes_blog/article/details/52881296

  10. 关于头文件的一些常用<meta>

    一.常见的<meta>(摘自百度) 1. 设置编码信息<meta http-equiv="Content-Type" Content="text/htm ...