【答疑释惑】固定菜单滚动

分享一下滚动菜单源码,可以直接用,希望对盟友有帮助

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>test</title>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>

<style type="text/css">

*{ margin:0; padding:0;}

.ndiv{ width:200px; height:400px; border:1px solid #ccc;background: #f1f1f1;}

.fix-div{ position:fixed; top:0px;}

</style>

</head>

<body>

<section style="height: 700px;"></section>

<div id="mydiv" class="ndiv" >di222v</div>

<section style="height: 700px;"></section>

<script type="text/javascript">

$.fn.fixedDiv = function(actCls){

var pos = 0,

that = $(this),

topVal;

if(that.length > 0){

topVal = that.offset().top;

}

function fix(){

pos = $(document).scrollTop();

if (pos > topVal) {

that.addClass(actCls);

if (!window.XMLHttpRequest) {

that.css({

position: 'absolute',

top : pos

});

}

} else {

that.removeClass(actCls);

if (!window.XMLHttpRequest) {

that.css({

position: 'static',

top : 'auto'

});

}

}

}

fix();

$(window).scroll(fix);

}

$('#mydiv').fixedDiv('fix-div');

</script>

</body>

</html>

转自http://www.cnblogs.com/jikey/p/3773732.html

原文发布于微信公众号 - 程序员互动联盟(coder_online)

原文发表时间:2015-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区