文档章节

Jquery几行代码解决跟随屏幕滚动DIV

深圳大道
 深圳大道
发布于 2016/12/29 15:39
字数 192
阅读 3
收藏 0
<!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>jquery.text-effects</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
        #test
        {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 130px;
            height: 60px;
            background: #555;
            color: #fff;
            font-size: 13px;
        }
    </style>
    <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script language="javascript">
        $(document).ready(function () {
            var menuYloc = $("#test").offset().top;
            $(window).scroll(function () {
                var offsetTop = menuYloc + $(window).scrollTop() + "px";
                $("#test").animate({ top: offsetTop }, { duration: 600, queue: false });
            });
        }); 
    </script>
</head> 
<body> 
    <h1>7行代码的跟随屏幕滚动层.</h1> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <div id="test">Dev By CssRain.cn<br/>Test ie6+,firefox3.0</div> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
</body> 
</html>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/18303981

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
html任意区域滚动跟随代码.

网页滚动时, div也会跟随滚动. 功能适合于任何元素体中, 不仅仅是顶部滚动. 代码如下: <!DOCTYPE HTML><html><head> <meta http-equiv="content-type" content="text/html" /> <title>无标题......

Tuesday
2014/02/20
0
0
好程序员技术分享jQuery实现类似fullpage插件的全屏滚动效果

好程序员技术分享jQuery实现类似fullpage插件的全屏滚动效果。 结合网上的思路,加上我之前自己做的代码,代码有这几种功能: 1.头部和尾部的内容可以不用滚动,只要中间的滚动就行。 2.支持...

好程序员IT
04/04
16
0
chromatable.js源码简单阅读一个jquery插件

chromatable.js实现了一个表格表头固定,表格体滚动的效果. 今天找到的纯html解决方案:建立两个表格,一个表格放表头的信息,一个表格使用div包装起来,div中加上滚动样式;这样就实现了上面的效果...

乔康007
2013/03/26
1K
0
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
116
0
jQuery实现自定义checkbox和radio样式

jQuery实现自定义checkbox和radio样式 1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决...

开元中国2015
2015/07/14
450
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部