div当滚动到页面顶部的时候固定在顶部实例代码

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

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

jquery实现滚动到页面底部时无限加载内容的代码

var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll(function() { //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 100 >= $(document).height() && $(this).scr

滚动页面时DIV到达顶部时固定在顶部

本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下面是代码: <body style="margin:0px;"><div style="height:300px;background:#e0e0e0"></div><div id="fixedMenu_keleyi_

让div固定在顶部不随滚动条滚动

让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ

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

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

让div固定在顶部不随滚动条滚动【转】

让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ

设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initi

监听页面中的某个div的滚动事件，并将其滚动距离保存到cookie

在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type{ height: 600px; overflow-y: auto; } 当里面的内容超过高度时,div会出现滚动条,监听这个div的滚动事件: //监听这个dom的scroll事件 document.getElementById("type").addEventListener(&quo

Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>滚动到页面顶部加载</title&g

Web前端页面功能——点击按钮返回顶部的实现方法

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) html代码 <a href="javascript:scroll(0,0)">

jQuery+ajax实现滚动到页面底部自动加载图文列表效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>滚动到页面顶部加载</title&g

ScrollTo：平滑滚动到页面指定位置

使用方法 1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.scrollTo.js"></script> 2.HTML <ul class="nav

基于JQuery实现滚动到页面底端时自动加载更多信息

基于JQuery实现滚动到页面底端时自动加载更多信息关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false; $.post("ajax.

ScrollTo：实现平滑滚动到页面指定位置

ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本文以DEMO为示例讲解该插件的应用. 使用方法 ScrollTo:实现平滑滚动到页面指定位置演示地址:http://www.helloweba.com/demo/scrollto/ 1.准备jQuery库和scrollTo.js插件. <script type="text/javascript

vue 实现滚动到页面底部开始加载更多

直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in newsList"> <div class="date">{{showDay(index)}}</div> <div class="list" > <ul> <li class="list

控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息

三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29LoD19) 方法一:使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="text/javascript">function o

使一个div始终显示在页面中间

使一个div始终显示在页面中间假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样: <style type=”text/css”> *{margin:0;padding:0;} #myDiv{width:400px;height:200px;margin:0 auto;} </style> 这里的400px是你需要居中设置的div的宽度,200px是它的高,mar

不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部【转载】

前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可用来访问根节点: document.documentElement document.body 第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点. 第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问. [文档类型已申明] IE document.do

html bootstrap 表头固定在顶部，表列可以自由滚动的效果

该效果主要是依照 bootstrap 的一个样式,class="navbar-fixed-top"; 参考网址为:http://v3.bootcss.com/components/#navbar-fixed-top 贴上代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码代码如下://获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentEle

div:给div加滚动栏　div的滚动栏设置

今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不成的只是在不超出时,会有以下的滚动栏,所以不是最好的选择二. <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div&

div当滚动到页面顶部的时候固定在顶部实例代码

热门专题