css 控制<div 如何使用js悬浮广告代码
css.common_scroll{position:fixed;top:0px;width:300px;height:250px;}.ad{margin:0auto;t...
css
.common_scroll {position: fixed; top: 0px; width: 300px; height: 250px;}
.ad { margin: 0 auto;text-align: center;}
<div style="width:300px;" class="ad common_scroll" id="float_ad">
我是悬浮框
</div>
直接这样的话，一打开网页<div就显示到网页顶端，div悬浮框的上面还有其他内容呢。
请问，JS怎么控制当用户拉到div时，div的class="ad common_scroll" 就会悬浮，没到div时，div的class="ad" 就不会悬浮。请问js代码怎么写。 展开
.common_scroll {position: fixed; top: 0px; width: 300px; height: 250px;}
.ad { margin: 0 auto;text-align: center;}
<div style="width:300px;" class="ad common_scroll" id="float_ad">
我是悬浮框
</div>
直接这样的话，一打开网页<div就显示到网页顶端，div悬浮框的上面还有其他内容呢。
请问，JS怎么控制当用户拉到div时，div的class="ad common_scroll" 就会悬浮，没到div时，div的class="ad" 就不会悬浮。请问js代码怎么写。 展开
展开全部
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen">
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<div style="width:100%;height:150px;background:#eee;"></div>
<div id="go" style="padding:30px;width:70px;border:1px solid red;background:#f60;">1</div>
<div style="width:100%;height:1500px;background:#eee;"></div>
<div></div>
<script type="text/javascript">
$(function() {
var elm = $('#go');//通用代码，只需要修改此处id
var startPos = $(elm).offset().top;
var this_left = $(elm).offset().left;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(elm).css('position',((p) > startPos) ? 'fixed' : 'static');
$(elm).css('top',((p) > startPos) ? '10px' : '');
$(elm).css('left',this_left);
});
});
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
