div随页面滚动遇顶固定的两种方法(js&jQuery)

【div随页面滚动遇顶固定的两种方法(js&jQuery)】的更多相关文章

div随页面滚动遇顶固定的两种方法(js&jQuery)

一.遇顶固定的例子我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏幕浏览最新…

jquery页面滚动，菜单固定到顶部

// 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 if(scroH>=navH){ $("#topp").css…

css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路首先把这个问题分步解决,需要攻克以下两点: 1)让两个div并排到一行 2)让一个div宽度固定,另个div占据剩下宽度的空间关于第一点,首先要明确,div属于块级元素,在文档标准流中单独占据一行.要想多个div在一行,就可以想办法让div脱离标准流,比如使用float或者absolute: 关于第二点,首先有一个宽度固定的div…

设置一个DIV块固定在屏幕中央（两种方法）

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <!doctype html> <html lang="zh-cn"> <head> <meta charset="UT…

jquery/js/a标签实现当前页面跳转的两种方法

在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前页面不同部位跳转方法1.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>…

原生Js 两种方法实现页面关键字高亮显示

原生Js 两种方法实现页面关键字高亮显示上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一依靠正则表达式修改 1.获取obj的html2.统一替换html标签3.替换要修改的关键字4.再把html标签修改回去不足就是如果查找的关键字跟替换的标签一样就有冲突了效果预览:http://jsfiddle.net/dtdxrk/EAqkN/embedded/result/ 1 <!DOCTYPE HTML> 2 <html lang=&qu…

iframe-父子-兄弟页面相互传值(jq和js两种方法)

参考文章: http://blog.csdn.net/u013299635/article/details/78773207 http://www.cnblogs.com/xyicheng/archive/2010/02/26/1674017.html 父窗口代码 <body> <iframe id="frame" name="frame" src="frame.htm" frameborder="0">…

JSP页面中的pageEncoding和contentType两种属性

关于JSP页面中的pageEncoding和contentType两种属性的区别: pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容编码 JSP要经过两次的“编码”,第一阶段会用pageEncoding,第二阶段会用utf-8至utf-8,第三阶段就是由Tomcat出来的网页, 用的是contentType. 第一阶段是jsp编译成java 它会根据pageEncoding的设定读取jsp,结果是由指定的编码方案翻译成统一的UT…

网站开发进阶(三十五)JSP页面中的pageEncoding和contentType两种属性

JSP页面中的pageEncoding和contentType两种属性本文介绍了在JSP页面中经常用的两种属性,分别是pageEncoding和contentType,希望对你有帮助,一起来看. 关于JSP页面中的pageEncoding和contentType两种属性的区别: pageEncoding是jsp文件本身的编码. contentType的charset是指服务器发送给客户端时的内容编码. JSP要经过两次的"编码",第一阶段会用pageEncoding,第二阶段会用ut…

利用来JS控制页面控件显示和隐藏有两种方法

利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐…