鼠标滚动div固定浮动-加锚点
页面:
<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固定浮动-加锚点的更多相关文章
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式
js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...
- 如何用jQuery实现在鼠标滚动后导航栏保持固定
要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
- 让div固定在顶部不随滚动条滚动
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 让div固定在顶部不随滚动条滚动【转】
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...
随机推荐
- MongoDB 概念解析
SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection 数据库表/集合 row document 数据记录行/文档 col ...
- HTML5扩展之微数据与丰富网页摘要
一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使 ...
- 关于javascript面向对象的详解!
认识面向对象 1.面向对象中的概念 一切事物皆对象 对象具有封装和继承特性 信息隐藏 2.基本面向对象 3.函数构造器构造对象 深入了解面向对象 第一种书写格式 第二种书写格式
- fstream文件操作
fstream(const char* filename, ios::openmode); ios::app: 以追加的方式打开文件 ios::ate: 文件打开后定位到文件尾,ios:app就包含有 ...
- IntelliJ IDEA 2016
IntelliJ IDEA 2016 注册码 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1Ii ...
- [C语言入门笔记]分支结构与数组
分支结构与数组 什么是分支结构? 分支结构是用户或者程序可以选择下一步执行哪个语句 分支结构有哪些? If If Else If Else If Switch 在初学者的学习过程中第一种和第二种比较普 ...
- 关于absolute 和 relative 定位的定义
absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位,按照我们 ...
- Oracle中DBLink的使用
DBLink 的作用是在局域网内,通过一台服务器上面的数据库访问另外一台服务器上面数据库的功能. 下面简单的介绍DBLink的配置: 服务器A:IP 10.10.10.107, 数据库实例名:orcl ...
- iOS开发中关于像素的几个概念
DPI与PPI DPI(Dots Per Inch)是印刷行业中用来度量空间点密度用的,这个值是打印机每英寸可以喷的墨汁点数. 计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设备中的原子单 ...
- 工作需求----表单select多选交互
由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中.支持多选属性: 1.html内容 multiple=”multiple” 属性为多选属性 <div clas ...