鼠标滚动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 ...
随机推荐
- iOS 工程功能实现之好用的第三方
1.http://www.cocoachina.com/ios/20140224/7868.html (一个天气App案例) LBBlurredImage是一个继承自UIImageView,轻而易举 ...
- Greenlets间如何实现互相通信?
Greenlets互相通信之Event 1.为什么引入Event: 2.Event是什么: 3.编程实例. 为什么引入Event 1.windows中有Events,作为线程间同步的方法: 2.Gev ...
- Android View 简析
基于android 4.4上源码分析: setContentView流程: getwindow() ->setContentView() -> installDecor() -> a ...
- ubuntu16.04安装virtualbox5.1失败 gcc:error:unrecognized command line option ‘-fstack-protector-strong’
系统:ubuntu16.04.1 软件:Virtualbox-5.1 编译器:GCC 4.7.4 在如上环境下安装Vbx5.1提示我在终端执行/sbin/vboxconfig命令 照做 出现如下err ...
- ActiveReports中自定义Winforms的Viewer 工具栏
ActiveReports中提供不同平台的报表浏览器来加载报表,而不同平台的报表浏览器功能也不一致,今天我们来学习如何定制Winforms Viewer控件. 预览效果: 核心代码: C# // C# ...
- [HTML/HTML5]9 使用表单
9.1 创建基本表单 表单都具有相同的基础结构.即它都包含表单的的开始标记<form>和结束标记</form>.<input>控件和处理表单的方法.form元素包 ...
- Hibernate与MyBatis
一. Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀的O/R ...
- javascript 实现tab菜单切换
<!DOCTYPE html> <html> <head> <title></title> </head> <body s ...
- UITableViewCell 顶格
首先在ViewDidLoad 或者ViewWillAppear里边写 if ([_tabView respondsToSelector:@selector(setSeparatorInset:)]) ...
- vue-新建项目出错情况分析
1.状况一: 按照正常流程新建项目,最终运行npm run dev 的时候,就频频出错,最终找出问题原来在于部分依赖包丢失了,于是重新安装所需要的依赖包再运行项目便好了!