<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>STICKY</title> <!--<script src="modernizr-dev.js"></script>--> <link href="index.css" rel="stylesheet" /> </head> <body> <header>TEST</header> <div > <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> <li id="test"><div>test</div></li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> </ul> </div> <script> function featureTest( property, value, noPrefixes ) { // Thanks Modernizr! http://www.51sjk.com/Upload/Articles/1/0/330/330266_20220921171847081.jpg var prop = property + ':', el = document.createElement( 'test' ), mStyle = el.style; if( !noPrefixes ) { mStyle.cssText = prop + [ '-webkit-', '-moz-', '-ms-', '-o-', '' ].join( value + ';' + prop ) + value + ';'; } else { mStyle.cssText = prop + value; } return mStyle[ property ].indexOf( value ) !== -1; } 'use strict'; onload = function() { var stickySupported = featureTest('position', 'sticky'); document.querySelector('html').classList.add(stickySupported ? 'csssticky' : 'no-csssticky'); if (!stickySupported) { var elem = document.getElementById('test'); elem.style.height = elem.height = getComputedStyle(elem).height; elem.children[0].style.right = parseFloat(getComputedStyle(elem.parentElement.parentElement).width) - parseFloat(getComputedStyle(elem).width) + 'px'; elem.parentElement.addEventListener('scroll', function() { console.log(this.scrollTop); if (this.scrollTop > elem.offsetTop) { elem.classList.add('sticky'); } else { elem.classList.remove('sticky'); } }); } } </script> </body> </html>
XHTMT|
HTML5|
CSS|
HTML DOM|
jQuery|
JSON|
AJAX|
LESS|
HTML|
Bootstrap|
Foundation|
AngularJS|
Ember.js|
TypeScript|
AngularJS2|
React|
jQuery UI|
jQuery EasyUI|
Node.js|
Highcharts|
Echarts|
Vue.js|
CoffeeScript|
Ext.js|
Meteor|
SASS|
Omi|
Markdown|
前端开发规范|
浏览器|
webpack|
JavaScript|
CSS3|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....