文档章节

滚动到顶部后固定在顶部代码

Macro.Bo
 Macro.Bo
发布于 2014/06/03 11:00
字数 152
阅读 565
收藏 8
点赞 0
评论 0
<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title></title> 
  <link rel="stylesheet" type="text/css" href="css/base.css" media="all" /> 
  <style type="text/css">
    .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
    .header{height:150px;}
    #nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
    a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
    </style> 
  <script type="text/javascript">
<!--
function menuFixed(id){
    var obj = document.getElementById(id);
    var _getHeight = obj.offsetTop;
    
    window.onscroll = function(){
        changePos(id,_getHeight);
    }
}
function changePos(id,height){
    var obj = document.getElementById(id);
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(scrollTop < height){
        obj.style.position = 'relative';
    }else{
        obj.style.position = 'fixed';
    }
}

window.onload = function(){
    menuFixed('nav');
}
//-->
</script> 
 </head> 
 <body> 
  <div> 
   <div></div> 
   <div id="nav"> 
    <a href="#">11111</a> 
    <a href="#">22222</a> 
    <a href="#">33333</a> 
    <a href="#">44444</a> 
    <a href="#">55555</a> 
   </div> 
  </div>  
 </body>
</html>


本文转载自:http://www.cnblogs.com/yjzhu/archive/2013/01/18/2866782.html

共有 人打赏支持
Macro.Bo
粉丝 1
博文 20
码字总数 1406
作品 0
南京
高级程序员
转 整屏滚动效果插件 fullpage详解

1、引用文件 [html] view plaincopyprint? <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></scri......

大叔做web前端
2014/04/28
0
1
jQuery全屏滚动插件FullPage.js中文帮助文档API

七牛最近改版了网站,弄成全屏滚动的特效,真的很炫,于是查看其源代码,发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很...

Jack088
2016/08/08
211
0
简单返回顶部代码及注释说明

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 返回顶部 方法二:操作scrooll函数用...

lovethe51cto
2015/08/12
0
0
《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化

以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看 1、《React-Native系列》33、 键盘遮挡问题处理 2、《React-Native系列》42、键盘遮挡问题官方处...

hsbirenjie
2017/02/17
0
0
【Android】商品详情页实现

我告诉自己,要独立,要坚强,要勇敢,要活的漂亮,要让自己永远善良。 现今的市场说O2O模式很火一点都不假,例如电商,各行各业都在做电商。而做电商平台必不可少的是商品详情页,那么如何实...

zrunker
2017/10/25
0
0
一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Ba...

日期:2011/11/17 来源:GBin1.com 今天介绍一个非常可爱漂亮的滚动到顶端的插件,无需设置。它能快速的将页面里的元素添加滚动到顶端的功能。而且只在滚动时才出现,当滚动到顶端自动消失。 ...

gbin1
2011/11/17
0
1
06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比...

aicoder
01/03
0
0
关于多个垂直排列的div滚动 固定到顶部的问题

这里有一个列表 我想要每一个 表头 到顶部时 都固定到顶部 下面是 代码 复制 可直接 看效果 div 向上走添加class样式可以固定到顶部 但是 再往回滚动就去除不了classs样式了 。...

qianduanxb
2017/03/08
72
1
超实用!网站导航栏设计形式总结

导航对于一个网站来说,起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用。下面跟大家分享下常用的几种网页导...

郑乔尹在旅游
2017/12/28
0
0
手机浏览器禁止body滚动

大家好,请教个问题,我在使用jquery ui的dialog的时候想要禁止body的滚动事件,这在PC上已经实现了,但在手机上一直无法禁止,使用touchmove的event.preventDefault()可以禁止body的滚动,但...

桶装更尽兴
2014/06/20
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell及python脚本方式登录服务器

一、问题 在工作过程中,经常会遇见需要登录服务器,并且因为安全的原因,需要使用交互的方式登录,而且shell、python在工作中也经常用到,并且可以提供交互的功能。都是利用了expect、spawn...

yangjianzhou
12分钟前
0
0
upstream sent too big header while reading...

nginx 报错:1736 upstream sent too big header while reading response header from upstream 1. 一般处理 location ~ \.php$ { #增加下面两句 fastcgi_buffer_size 128k; ......

dubox
22分钟前
0
0
Python解析配置文件模块:ConfigPhaser

import configparser as pa# [SectionA]# a = aa# b = bb# c = cc# [SectionB]# optionint = 1# optionfloat = 1.1# optionstring = string#https://www.cnblogs.com/a......

易野
29分钟前
0
0
Java基础——面向对象

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Object的方法: clone() Object 克隆 to Strin...

凯哥学堂
31分钟前
0
0
rabbitmq学习记录(八)消息发布确认机制

RabbitMQ服务器崩了导致的消息数据丢失,已经持久化的消息数据我们可以通过消息持久化来预防。但是,如果消息从生产者发送到vhosts过程中出现了问题,持久化消息数据的方案就无效了。 Rabbit...

人觉非常君
35分钟前
0
0
毕业5年,我是怎么成为年薪30W的运维工程师

#转载# 我在大学读的是计算机专业,但大学毕业之后,进入到一家私企进行工作,工作的内容类似于网管,会经常的去修电脑,去做水晶头等内容。刚开始工作,也没想太多,最想的是丰富自己的工作...

Py爱好
42分钟前
1
0
大数据基础知识,大数据学习,涉及的知识点

一、什么是大数据 一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模、快速的数据流 转、多样的数据类型和价值密度低四大特征。...

董黎明
58分钟前
0
0
Linux CentOS 7上安装极点五笔

话说几天前在新买的惠普笔记本上成功地安装了Linux CentOS 7操作系统、Nvidia Quandro P600驱动程序及X Window,并在VMware下安装Red Hat教学环境,彻底跳出Windows的苦海,但仍然有一件事不...

大别阿郎
今天
17
0
2018年7月20日集群课程

一、集群介绍 集群,简单地说是指一组(若干个)相互独立的计算机,利用高速通信网络组成一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器。 ...

人在艹木中
今天
0
0
spark开发机中调试snappy

目的 在Idea中的点击运行,使spark可以直接读取snappy 自己编译hadoop,以支持snappy的压缩。 自己编译的目的就是要得到支持snappy文件读写的动态链接库。如果可以在网上下载,可以跳过自行编...

benny周
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部