页面:
    <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. apt-get 与 yum 的区别

    一般来说著名的 linux 系统基本上分两大类: RedHat系列:Redhat.CentOS.Fedora等 Debian系列:Debian.Ubuntu等 RedHat 系列 1 常见的安装包格式 ...

  2. Android文件存储

    文件存储是Android中最基本的一种数据存储方式,它不读存储的内容进行任何的格式化处理,所有数据原封不动的保存在文件之中.如果想用文件存储的方式保存一些较为复杂的数据,就需要定义一套自己的格式规范, ...

  3. ThinkPHP的URL重写+路由+伪静态,实现SEO效果。

    1.URL重写,隐藏网址中的Index.php. ThinkPHP 作为 PHP 框架,是单一入口的,那么其原始的 URL 便不是那么友好.但 ThinkPHP提供了各种机制来定制需要的 URL 格式 ...

  4. ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    在安装好的MySQL服务器上,配置了环境变量之后,发现用mysql无法登录,报如题的错误,实在没有办法,决定用安全模式对root用户修改密码: 首先关闭正在运行的MySQL; 在一个终端窗口运行命令: ...

  5. JS在window和document的应用

    页面跳转: window.location.href('地址') window.open('地址', '_self') 打开新窗口: window.open('地址', '_blank') 只显示地址 ...

  6. HTML5 十大新特性(三)——视频和音频

    一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...

  7. javadoc相关问题

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  8. 初始Java 第一课程DVD项目

    DVDSet 类: DVD DVD    删除功能 实现DVD借出功能 DVD还回功能

  9. Meteor常用技能

    调试: 服务器端 console.log() 会输出到终端命令行 客户端的 console.log() 会输出到浏览器控制台 Mongo Shell: 启动方式:meteor mongo 清空数据:m ...

  10. SAP LOGON DATA CHECK

    之前有朋友做过RFC登录验证,后来群里又有很多人问SAP的登录验证函数. 后来自己找找了,看看了,然后改写了一个LOGON DATA CHECK... FUNCTION ZUSER_CHECK_LOG ...