鼠标滚动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 ...
随机推荐
- (原创)vim配色------水果色,不伤眼。
- JS获取元素尺寸大小、鼠标位置
//e.clientX|Y:表示鼠标相对浏览器可视窗口的当前坐标 //e.offsetX|Y:表示鼠标相对于事件源对象的坐标 //e.pageX|Y:表示鼠标相对于网页的坐标 /* element.o ...
- jieba分词
一.安装 pip 安装 或者 先下载http://pypi.python.org/pypi/jieba/ ,解压后运行python setup.py install 二.功能 1.分词 2.添加自定义 ...
- Python学习---除法
python有两种除法,普通除法 a/b ,不论a,b精度 得到的都是浮点数. 4/2 = 2.0 3/5 = 0.6 floor除法,a//b , 得到一个舍弃小数位的整数结果,所以结果永远是 ...
- 在checkbox中使用.prop; angular中属性的值使用变量问题
1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return false就能阻止点击则改变状态的默认行为 ...
- c3p0连接池获得的Connection执行close方法后是否真的销毁Connection对象?
问题描述: jfinal做的api系统中,在正常调用接口一段时间后,突然再调用接口的时候,该请求无响应api系统后台也无错误信息 (就是刚开始接口调用是正常的,突然就无响应了) 于是啊,就开始找错误. ...
- 增强:MB1A物料价格检查
INCLUDE:MM07MFP0_PICKUP_AUSFUEHREN FORM:pickup_ausfuehren这是MB1A的PAI的逻辑流里的字段检查 在FORM开始的地方: '. DATA:S_ ...
- 缺少wlanapi.dll文件问题修复
我在下载百度云盘的时候碰到了一个问题,缺少wlanapi.dll文件.下面贴出解决办法 第一步 http://d.apktop.cn/p/soft_134.html 下载wlanapi.dll 第 ...
- jQuery验证插件 Validate详解
1.引入必要的文件,以及语言中文提示包 2.使用规则如下: 序号 规则 描述 1 required:true 必须输入的字段. 2 remote:"check.php" 使用 aj ...
- axis2开发webservice入门到精通
1,准备工作: 首先我们要下载:axis2-1.4.1-war(发布webservice),axis2-1.4.1-bin.zip(webservice调用使用的各种包). 下载好了,把axis2-1 ...