鼠标滚动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 ...
随机推荐
- 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器)
应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件 ...
- 推荐相关学习 & 典型算法、典型特征、典型推荐系统框架
总的来说,信息爆炸,产生了信息过载.解决的方法主要有两类:检索和推荐.检索是主动的有目的的.意图明确,推荐是非主动的.意图不明确. 推荐方面最经典的,就是协同过滤推荐了.我博客这里有两篇,一篇偏理论, ...
- Dev Express 动态生成XRTable使用总结
1. XRTableCell常见属性 XRTableCell xrTableCell = new XRTableCell(); A. 字体及字体大小 xrTableCell.Font = new S ...
- navigation controller
一.程序框架 1.程序结构
- 【c#】对象转json字符串/字符串转Json对象
using Newtonsoft.Json; 一.Hashtable => Json Hashtable hash = new Hashtable(); hash.Add("key1& ...
- Yii2使用教程
安装 中文文档:http://www.yiichina.com/doc/guide/2.0/start-installation 1,安装 这里我直接下载归档文件,压缩包安装了.composer各种麻 ...
- python简介和入门
一.什么是python? python是一种面向对象.解释型的计算机语言,它的特点是语法简洁.优雅.简单易学. 二.解释型语言和编译型语言 编译型语言--就是先把写好的程序翻译成计算机语言然后执行,就 ...
- VMware中linux配置1-安装VMware tool 共享文件夹
linux:ubuntu 14 安装Linux,使用的ubuntu-14.04.1-desktop-amd64.iso 安装的,这个就不写了. 为了在linux中访问windows的目录,需要安装VM ...
- Json.net 常用使用小结
using System; using System.Linq; using System.Collections.Generic; namespace microstore { public int ...
- MySql学习(四) —— 函数、视图
注:该MySql系列博客仅为个人学习笔记. 本篇博客主要涉及MySql 函数(数学函数.字符串函数.日期时间函数.流程控制函数等),视图. 一.函数 1. 数学函数 对于数学函数,若发生错误,所有数学 ...