JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)
先看效果:
阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位
方法一(顶部)
原理:直接使用css 进行控制;缺点:不兼容ie6-;
实现:position:fixed; top:0
方法二(顶部)
原理:获取页面被卷曲的高度(LEN),复制给 obj.STYLE.TOP=LEN,缺点,效果不是很流畅!
实现:
window.onscroll=function (){
var len=document.documentElement.scrollTop||document.body.scrollTop;
var obj=document.document.getElementById("id")
obj.style.top=len
}
方法三(各种部位)
这是在网上找的jq方法,自己也实际动手写了一遍;
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top;
var pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
}).addClass("shadow");
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
}).removeClass("shadow");
}
});
};
return $(this).each(function() {
position($(this));
});
};
调用
$(function(){
$("#nav").smartFloat();
});
ps:边框加阴影的css代码;
.shadow{-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px
rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}
JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)的更多相关文章
- Javascript实现页面滚动时导航智能定位
遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- js页面滚动时层智能浮动定位实现
直接上代码 $.fn.smartFloat = function (className) { var position = function (element) { var top = element ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- aos.js超赞页面滚动元素动画jQuery动画库
插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- jquery页面滚动,菜单固定到顶部
// 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...
- WOW.js——在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...
- 使用JS方法使页面滚动到指定元素+优化+API介绍(动画)
前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 目录 使用的API简介 初版 ...
随机推荐
- 深入理解JVM—性能监控工具
(转自:http://yhjhappy234.blog.163.com/blog/static/31632832201222691738865/) 我们知道,在JVM编译期和加载器,甚至运行期已经做了 ...
- myeclipse 8.5最新注册码
myeclipse 8.5最新注册码(过期时间到2016年) Subscriber:huazai Subscription Code:uLR8ZC-855550-6156585630 ...
- java截取图片部分尺寸
package util; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; i ...
- 在Eclipse中配置Tomcat 创建和运行Servlet/JSP
在Eclipse中配置Tomcat 创建和运行Servlet/JSP 步骤一:在Eclipse中配置Tomcat(注意下载Eclipse IDE for Java EE Developers) (1) ...
- 浅谈RAID写惩罚(Write Penalty)与IOPS计算
介绍 通常在讨论不同RAID保护类型的性能的时候,结论都会是RAID-1提供比较好的读写性能,RAID-5读性能不错,但是写入性能就不如RAID-1,RAID-6保护级别更高,但写性能相对更加差,RA ...
- 【转】SVN环境搭建教程
http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html http://www.cnblogs.com/xiaobaihom ...
- 小红伞和virtualbox5.0.10冲突
win7 sp1 64bit 旗舰版:virtual box 5.0.10 提示 error in supr3hardNtChildWaitFor……Timed out after 60001 ms ...
- Linux 计划任务 Crontab 笔记与总结(4)crontab 的日志
/var/log/cron 文件保存 cron 的任务执行记录 cd /var/log/ ls -l cron* 会发现每天都会有 cron 日志的变化 使用 tail -f cron 能够查看今天的 ...
- Android开发的七大环节
Android开发的七大环节 浏览:25 发布日期:2015/10/27 分类:职场感悟 一个完整的Android 开发流程主要包括策划.软件.交互.视觉.测试.运营维护这七大环节,其中的每一个环 ...
- Connection Management and Security
High Performance My SQL THIRD EDITION Each client connection gets its own thread within the server ...