js如何判断滚动到某个DIV时候，悬浮广告出现

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>float show</title>
<style>
*{margin:0;padding:0}
div{height:800px; position:relative;border-top:1px solid red;padding-top:10px;}
.flow-left{position:fixed; top:45px; z-index:999;display:none;}
.flow-left{background:url(images/float_left.png) no-repeat 0 0;width:144px;height:560px;padding-top:42px;left:0px;}
.flow-left a {width:100%; height:34px; display:block;}
</style>
</head>
<body>
<div class="flow-left" id="flow-left">
<a href="#"></a>
</div>
<div>
<img src="images/logo1.png" _src="images/GB_night_r4_c1.jpg">
</div>
<div>
<img src="images/logo1.png" _src="images/GB_night_r4_c1.jpg">
</div>
<div>
<img src="images/logo1.png" _src="images/GB_night_r4_c1.jpg">
</div>
<div>
<img src="images/logo1.png" _src="images/GB_night_r4_c1.jpg">
</div>

<div id="fl_yushou">
<a>show div</a><img src="images/logo1.png" _src="images/GB_night_r4_c1.jpg">
</div>
<div>
<img src="images/logo1.png" _src="images/GB_night_r4_c1.jpg">
</div>
<div>
<img src="images/logo1.png" _src="images/GB_night_r4_c1.jpg">
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
// 监听滚动事件

$(window).scroll(function(){
// 获得div的高度

var h = $("#fl_yushou").offset().top;
if($(this).scrollTop()>h && $(this).scrollTop() < h+100){

// 滚动到指定位置

$("#flow_left").show();

} else {
$("#flow_left").hide();
}
});

})
</script>
代入代码中不出现结果，不知道问题在哪？

举报该文章

相关建议 2015-09-16

程序上给body或documentElement的scrollLeft、scrollTop赋值，
浏览器在没有出滚动条时，赋值后该值不会发生变化，始终是0。
下面是示例，该检测方法，不仅可以检测页面滚动条，传入要检测的节点，一样可以得到想要的结果。
代码（给scrollLeft，scrollTop赋负数值时会报错，此外scrollLeft，scrollTop的值不能大于实际最大的滚动值）：

复制代码代码示例:
var isScroll = function (el) {
// test targets
var elems = el ? [el] : [document.documentElement, document.body];
var scrollX = false, scrollY = false;
for (var i = 0; i < elems.length; i++) {
var o = elems[i];
// test horizontal
var sl = o.scrollLeft;
o.scrollLeft += (sl > 0) ? -1 : 1;
o.scrollLeft !== sl && (scrollX = scrollX || true);
o.scrollLeft = sl;
// test vertical
var st = o.scrollTop;
o.scrollTop += (st > 0) ? -1 : 1;
o.scrollTop !== st && (scrollY = scrollY || true);
o.scrollTop = st;
}
// ret
return {
scrollX: scrollX,
scrollY: scrollY
};
};

第二部分，jquery判断滚动条到底部并加载数据的方法。js滚动条回到顶部示例代码 js 页面刷新记住滚动条位置的方法 js动态隐藏滚动条(兼容多浏览器 IE FF等)
有些浏览器下会出现累计执行、重复执行的情况，可以在准备执行前和执行完毕加一个执行完毕的标记，当判断上一次执行完毕，再执行该次操作。

复制代码代码示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现当拉动滚动条到底部加载数据</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
//首先，窗口绑定事件scroll
$(window).bind("scroll",function() {
// 判断窗口的滚动条是否接近页面底部，这里的20可以自定义
if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {
//没有写ajax的调用，直接触发了链接的click事件。
$("#container").append('<div style="height:500px">dd</div>');
} // www.jbxue.com
})
</script>
</head>
<body>
<div id="container">
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
</div>
</body>
</html>

另外，此下拉到最后，浏览器会记住当前滚动条位置，会在刷新页面后，直接执行操作，所以在刷新页面时要执行，滚动条到顶部的操作。

复制代码代码示例:
<script>
$(document).ready(function(){
$('body,html').animate({scrollTop:0});
});
</script>
在jQuery中获取浏览器窗口的尺寸信息
在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码：

$(window).height() 　//浏览器时下窗口可视区域高度
$(document).height()　　　　//浏览器时下窗口文档的高度
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度包括border padding margin
$(window).width() 　//浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度包括border padding margin

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/42pm4mpqf448msp4ps.html

其他看法

第1个回答 2014-11-11

利用jQuery：
$(function(){
// 监听滚动事件

$(window).scroll(function(){
// 获得div的高度

var h = $("#你要滚到位置的div").offset().top;
if($(this).scrollTop()>h && $(this).scrollTop() < h+100){

// 滚动到指定位置

$("#fl_yushou").show();

} else {
$("#fl_yushou").hide();
}
});

})追问

对就是这个意思这段代码代入进去调试效果不出来鼠标滚动到div id='fl_yushou' 时没有出现div id='flow_left'的结果

追答

你的flow-left上下都不一致，jquery也没引入。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>float show</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
    // 监听滚动事件

    $(window).scroll(function(){
         // 获得div的高度

         var h = $("#fl_yushou").offset().top;
         if($(this).scrollTop()>h && $(this).scrollTop() < h+$("#fl_yushou").height()){
            // 滚动到指定位置
            $("#flow-left").show();

        } else {
            $("#flow-left").hide();
        }
    });

})
</script>
<style>
*{margin:0;padding:0}
div{height:800px; position:relative;border-top:1px solid red;padding-top:10px;}
.flow-left{position:fixed; top:45px; z-index:999;display:none;}
.flow-left{background:url(images/float_left.png) no-repeat 0 0;width:144px;height:560px;padding-top:42px;left:0px;}
.flow-left a {width:100%; height:34px; display:block;}
</style>
</head>
<body>

剩下的代码我不帖了

本回答被提问者和网友采纳

相似回答

大家正在搜