求大神看看这个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 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

可以私聊我~

我要举报

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