鼠标滚动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添加未识别文件类型
这里用.c的文件格式来识别.nc文件 $ cd ~/.vim/ftdetect $ vim nc.vim # nc.vim内容 # au BufRead,BufNewFilE *.nc set fil ...
- 易货beta版本项目展示报告
一.团队成员和个人博客地址 PM:刘猛 开发人员:胡亚坤,董元财 测试人员:马汉虎,赖彦谕 团队名:bestRW 团队博客地址:http://www.cnblogs.com/niceRW/ 董元财:h ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- struct结构体(剽窃别人的)
结构是使用 struct 关键字定义的,与类相似,都表示可以包含数据成员和函数成员的数据结构. 一般情况下,我们很少使用结构,而且很多人也并不建议使用结构,但作为.NET Framework 一般型別 ...
- vscode 与 python 的约会
安装python 官网(https://www.python.org/downloads/)下载, 安装. (简单略过). 运行python代码 运行python代码的常见方式有三种: 运行pytho ...
- 浅谈HTTPS以及Fiddler抓取HTTPS协议
最近想尝试基于Fiddler的录制功能做一些接口的获取和处理工作,碰到的一个问题就是简单连接Fiddler只能抓取HTTP协议,关键的登录请求等HTTPS协议都没有捕捉到,所以想让Fiddler能够同 ...
- jQuery基础1
jQuery是轻量级的JavaScript库,jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数.更少的代码做更多的事. jQuery 可以选取某些元素并执行 ...
- Python 函数嵌套
def mumber(a): def add(b): return a*b return add if __name__=="__main__& ...
- php知识案列
n个不重复的随机数生成代码 <?php //range 是将1到100 列成一个数组 $numbers = range (1,100); //shuffle 将数组顺序随即打乱 shuffle ...
- C++ 在容器中存放函数指针
注意,对一般c++ 98标准编译器而言,容器泛型模板是不支持直接存放函数指针的.需要typedef将函数指针重命名. 比如,一个void返回值参数也为void的函数指针,需要 typedef void ...