html js css页面布局显示问题

迟到的企鹅 发布于 2015/06/01 18:02
阅读 612
收藏 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<!-- 导航 -->
<script type="text/javascript">
        var mt = 0;
        window.onload = function () {
            var mydiv = document.getElementById("mydiv");
            var mt = mydiv.offsetTop;
            window.onscroll = function () {
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                if (t > mt) {
                    mydiv.style.position = "fixed";
					mydiv.style.marginTop = "0";
					mydiv.style.top = "0";
					mydiv.style.borderTop ="3px solid red";
					mydiv.style.width ="800px";
                }
                else {
                    mydiv.style.margin = "0";
                    mydiv.style.position = "static";
					mydiv.style.borderTop ="none";
					mydiv.style.width ="auto";
                }
            }
        }
        
    </script>
<style type="text/css">
.article100 .mydiv{background-color:#ffcb03}
.article100 .mydiv ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.article100 .mydiv ul li{float:left;}
.article100 .mydiv ul a:link,a:visited{
	display:block;
	width:120px;
	text-align:center;
	padding:4px;
	color:#000000;
	text-decoration:none;
	text-transform:uppercase;
	}
.article100 .mydiv ul a:hover,a:active{
	background-color:#ffbb03;
}
</style>	
<div class="article100" >	
<div class="mydiv" id="mydiv" >
<ul>
<li><a href="#read">购买须知123456</a></li>
<li><a href="#content">课程内容</a></li>
<li><a href="#environment">教学环境</a></li>
</ul>
</div>
<span name="read" id="read" style="font-size:30px;">购买须知</span>
<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/>购买<br/>购买<br/>购买<br/>购买<br/>购买<br/>购买<br/>购买<br/>购买<br/>购买<br/>


<span name="content" id="content" style="font-size:30px;" >课程内容</span>
<br/>
上面有一行被挡住<br/>上面有两行被挡住<br/>2<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/>购买<br/>购买<br/>购买<br/>购买<br/>购买<br/>购买<br/>





</div>
</body>
</html>



加载中
返回顶部
顶部