求大神看看这个JQ滚动的时候为什么会闪

答案:2 悬赏:80 手机版

解决时间 2021-12-25 04:30

提问者网友：萌卜娃娃
2021-12-24 23:05

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* { margin:0; padding:0;}
.introduce_box { width:980px; margin:0 auto; padding-bottom:30px; height:3000px; }
.introduce_nav { width:219px; border:1px solid #efefef; background:#e0e0e0; line-height:30px;color:#333; float:left; position:relative; top:-200px;}
.introduce_nav_bl { position:fixed; top:0;}
</style>
</head>

<body>
<div style="height:400px;"></div>
<div class="introduce_box clearfix">
<div class="introduce_nav">
<dl>
<dt><i class="mr10"></i>公司概况</dt>
<dd>
<p><a href="http://192.168.9.182:83/html/introduce/about.shtml" >酒美简介</a><i></i></p>
<p><a href="http://192.168.9.182:83/html/introduce/History.shtml" >发展历程</a><i></i></p>
<p><a href="http://192.168.9.182:83/html/introduce/Honor.shtml">酒美殊荣</a><i></i></p>
<p><a href="http://192.168.9.182:83/html/introduce/strategic_rartner.shtml">战略合作伙伴</a><i></i></p>
<p class="active"><a href="http://192.168.9.182:83/html/introduce/media_reports.shtml">媒体报道</a><i></i></p>
<p><a href="http://192.168.9.182:83/html/introduce/investments.shtml" >投资背景</a><i></i></p>
<p><a href="http://192.168.9.182:83/html/introduce/contact_us.shtml">联系我们</a><i></i></p>
</dd>
</dl>

</div>
</div>
</body>
<script src="/js/jquery-1.6.4.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var nav_t = $(".introduce_nav").offset().top;
var scrollTop = $(window).scrollTop();
if(scrollTop>nav_t)
{
$(".introduce_nav").addClass('introduce_nav_bl');
} else
{
$('.introduce_nav').removeClass('introduce_nav_bl');
}

});
});
</script>
</html>

最佳答案

五星知识达人网友：何以畏孤独
2021-12-24 23:54

如果你要实现的是当浮动的div上边框超过窗口上边线时就随屏幕浮动,可以试试将下边的js脚本替换掉你原来<script>块中的内容.
var toBeFixDiv;
$(document).ready(function(){
toBeFixDiv=$(".introduce_nav");
$(window).scroll(function(){
var nav_t = toBeFixDiv.offset().top;
var scrollTop = $(window).scrollTop();
if(scrollTop>200)
//这个地方的判断有问题导致div闪烁
//因为当窗口滚动scrollTop大于DIV的top后position设置成了fixed
//之后如果再移动滚动条,受position:fixed的影响,scrollTop和nav_t会相等
//根据你的判断条件DIV会被remove掉introduce_nav_bl样式,所以回到了top:-200的位置
//其实这里只要判断window的滚动条位置大于200就添加introduce_nav_bl样式就可以达到你的需求
{
$(".introduce_nav").addClass('introduce_nav_bl');
} else
{
$('.introduce_nav').removeClass('introduce_nav_bl');
}
});
});我这里在判断条件中写死了一个常数200,当然你可以在onload事件中从界面获取浮动DIV初始化时相对窗口上边线的距离.
如有不符合你想法的地方请追问.

全部回答

1楼网友：持酒劝斜阳
2021-12-25 01:19

可以私聊我~

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息