网页浮动窗口跟随页面上下滑动效果

网页浮动窗口跟随页面上下滑动效果，当网页滚动条向下滚动的时候，该浮动窗口也会向下滑动。

核心代码：

		<script>

		var tips;

		var theTop = 100; /*这是默认高度,越大越往下*/

		var old = theTop;

		window.onload=function(){

		initFloatTips();

		}

		function initFloatTips() {

		    tips = document.getElementById('box');

		    moveTips();

		};

		function moveTips() {

		    var tt = 50;

		    if (window.innerHeight) {

		        pos = window.pageYOffset

		    } else if (document.documentElement && document.documentElement.scrollTop) {

		        pos = document.documentElement.scrollTop

		    } else if (document.body) {

		        pos = document.body.scrollTop;

		    }

		    pos = pos - tips.offsetTop + theTop;

		    pos = tips.offsetTop + pos / 10;

		    if (pos < theTop) pos = theTop;

		    if (pos != old) {

		        tips.style.top = pos + "px";

		        tt = 10;

		    }

		    old = pos;

		    setTimeout(moveTips, tt);

		}

		</script>

效果截图：

网页浮动窗口跟随页面上下滑动效果

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=gb2312&quot; /&gt;
&lt;title&gt;网页浮动窗口跟随页面上下滑动效果&lt;/title&gt;
&lt;style&gt;
	body {height:2000px;}
&lt;/style&gt;
&lt;script&gt;
var tips;
var theTop = 100; /*这是默认高度,越大越往下*/
var old = theTop;
window.onload=function(){
	initFloatTips();
}

function initFloatTips() {
    tips = document.getElementById(&#039;box&#039;);
    moveTips();
};
function moveTips() {
    var tt = 50;
    if (window.innerHeight) {
        pos = window.pageYOffset
    } else if (document.documentElement &amp;&amp; document.documentElement.scrollTop) {
        pos = document.documentElement.scrollTop
    } else if (document.body) {
        pos = document.body.scrollTop;
    }
    pos = pos - tips.offsetTop + theTop;
    pos = tips.offsetTop + pos / 10;

    if (pos &lt; theTop) pos = theTop;
    if (pos != old) {
        tips.style.top = pos + &quot;px&quot;;
        tt = 10;
    }
    old = pos;
    setTimeout(moveTips, tt);
}
&lt;/script&gt;	
&lt;/head&gt;
&lt;body&gt;

&lt;div id=&quot;box&quot; style=&quot;width:160px;height:300px;background:#CCC;position:absolute;top:100px;left:0;&quot;&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

随机推荐

窗口失去焦点是滚动标题，获得焦点后不滚动
效果要求：窗口失去焦点是滚动标题，获得焦点后标题不滚动。效果见代码。
网页浮动窗口跟随页面上下滑动效果
网页浮动窗口跟随页面上下滑动效果，当网页滚动条向下滚动的时候，该浮动窗口也会向下滑动。核心代码：复制代码代码如下: script var tips; var theTop = 100; /*这是默认高度,越大越往下*/ var old = theTop; window.onload=function(){ initFloatTips()
非常简洁的网页Tab效果setTab
网页上使用频率最高的Tab标签效果，封装成了一个setTab函数，使用方法非常简单。 setTab函数完整代码：复制代码代码如下: script function setTab(name, cursel, n) { for (i = 1; i = n; i++) { var menu = document.getElementById(name + i); var con =
纯JS写的右下角QQ抖动效果
纯JS写的右下角QQ抖动效果，代码简单容易理解修改。复制代码代码如下: script /*** 窗口抖动 ***/ function shake(){ var a=[bottom,right],b=0; var u=setInterval(function(){ document.getElementById(lovexin1).style[a[b%2]]=(b++)%42?0:4 + px; if(b
仿患者咨询平台效果
仿患者咨询平台效果，模拟患者提问专家回复效果，吸引患者点击咨询，测试表明点击率非常高。修改问答数据可修改js/data.js文件，问答数据已json数组形式保存。在线演示：仿患者咨询平台效果下载地址：仿患者咨询平台效果效果截图：展开效果收起效果

网页浮动窗口跟随页面上下滑动效果

相关文章

随机推荐