例子说明：当滑动页面致使滚动条距离顶部大于等于整个页面的百分之二十的时候固定菜单栏，且菜单栏距离整个页面的顶部为大标题的高度
1.绘制页面
<body style="margin: 0px;font-size: 36px;">
<div id="mtitle" style="text-align: center;background-color: #B84911">这是大标题</div>
<div id="menu" style="height:50px;width:100%;border:1px solid blue;">这是菜单栏</div>
<div style="height: 2000px;background-color: red;text-align: center;">其他的内容</div>
</body>2.实现固定效果
<script type="text/javascript">
var allHeight=document.body.scrollHeight; //获取整个页面的高度
var fixHeight=allHeight*0.2; //获取整个页面高度的百分之二十
/* 获取大标题的高度，有三种获取方式，但值是不一样的，可根据自己的需求使用 */
//获得的是该div本身的高度, (不包含padding,margin,border)
var mtitleHeight1=$("#mtitle").height();
//包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
var mtitleHeight2=$("#mtitle").outerHeight();
//包含该div本身的高度, 以及padding,border,margin上下的总高度
var mtitleHeight=$("#mtitle").outerHeight(true);
/*滚动事件 */
$(window).scroll(function() {
if($(window).scrollTop()>=fixHeight){ //滚动条距离顶部大于某高度(整个页面的百分之二十)
$("#menu").css("position","fixed"); //设置菜单栏的固定属性
$("#menu").css("top",mtitleHeight); //设置菜单栏距离顶部的距离
}else{
$("#menu").css("position",""); //清空菜单栏的固定属性
}
});
</script>
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
