$elem.offset().top
来源：5-4 自由编程
weixin_慕仰4083625
2019-12-09 15:06:33
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="header"></div> <div class="body"></div> <div class="foot"> <div class="container" data-load="footdata.json" id="foot"> <div class="loading-img"></div> <!--<div class="foot-item fl"> <p class="foot-item-title">消费者保障</p> <ul class="foot-item-body"> <li class="fl">保障范围</li> <li class="fl">退货退款流程</li> <li class="fl">服务中心</li> <li class="fl">更多特色服务</li> </ul> </div> <div class="foot-item fl"> <p class="foot-item-title">新手上路</p> <ul class="foot-item-body"> <li class="fl">新手专区</li> <li class="fl">消费警示</li> <li class="fl">交易安全</li> <li class="fl">24小时在线帮助</li> <li class="fl">免费开店</li> </ul> </div> <div class="foot-item fl"> <p class="foot-item-title">付款方式</p> <ul class="foot-item-body"> <li class="fl">快捷支付</li> <li class="fl">信用卡</li> <li class="fl">余额包</li> <li class="fl">蜜蜂花啊</li> <li class="fl">货到付款</li> </ul> </div> <div class="foot-item fl"> <p class="foot-item-title">慕淘特色</p> <ul class="foot-item-body"> <li class="fl">手机慕淘</li> <li class="fl">慕淘信</li> <li class="fl">大众评审</li> <li class="fl">B格指南</li> </ul> </div>--> </div> </div> <div id="footer" class="footer"> <div class="container" data-load="footerdata.json" id="footer"> <div class="loading-img"></div> <!--<p class="footer-link-wrap"> <a href="###" target="_blank" class="footer-link">关于慕淘</a ><a href="###" target="_blank" class="footer-link">合作伙伴</a ><a href="###" target="_blank" class="footer-link">营销中心</a ><a href="###" target="_blank" class="footer-link">廉正举报</a ><a href="###" target="_blank" class="footer-link">联系客服</a ><a href="###" target="_blank" class="footer-link">开放平台</a ><a href="###" target="_blank" class="footer-link">诚征英才</a ><a href="###" target="_blank" class="footer-link">联系我们</a ><a href="###" target="_blank" class="footer-link">网站地图</a ><a href="###" target="_blank" class="footer-link">法律声明</a ><a href="###" target="_blank" class="footer-link">知识产权</a> </p> <p>© 2017 imooc.com All Rights Reserved</p>--> </div> </div> </body> <script src="js/jquery.js"></script> <script src="js/bulidhtml.js"></script> <script src="js/index.js"></script></html>
bulidhtml.js
var $win = $(window);
var $doc = $(document);
function buildfoothtml($elem){
var dataLoad = $elem.data('load');
if (!dataLoad) {return;}
if (!$elem.data('loaded')) {
var html = '';
$.getJSON(dataLoad,function(data) {
for (var i = 0; i < data.length; i++) {
html=+'<div class="foot-item fl"><p class="foot-item-title">'+data[i].title+'</p><ul class="foot-item-body">';
for (var j = 0; j < data[i].items.length; j++) {
html =+'<li class="fl">'+data[i].items[j]+'</li>';
}
html =+'</ul>';
html =+'</div>';
}
$elem.html(html);
$elem.data('loaded', true);
});
}
}
function buildfooterhtml($elem){
var dataLoad = $elem.data('load');
if (!dataLoad) {return;}
if (!$elem.data('loaded')) {
var html = '';
$.getJSON(dataLoad,function(data) {
html=+'<p class="footer-link-wrap">';
for (var i = 0; i < data.length; i++) {
html =+'<a href="###" target="_blank" class="footer-link">'+data[i].item+'</a>';
}
html =+'</p>';
html =+'<p>© 2017 imooc.com All Rights Reserved</p>';
$elem.html(html);
$elem.data('loaded', true);
});
}
}
function isvisible($elem) {
return ($win.height()+$win.scrollTop()> ($elem.offset().top) )&&($win.scrollTop() < ($elem.offset().top) + $elem.height());
}index.js
var $foot = $('#foot'),
$win = $(window);
$win.on('scroll resize',function($foot){
if (!isvisible($foot)) {
setTimeout(function(){
buildfoothtml($foot);
},1000);
}
});
运行会报错，不知道问题出在哪里
写回答
1回答
-
好帮手慕慕子
2019-12-09
同学你好，可以在isvisible函数中打印$elem，查看打印的结果
打印结果如下，此时的$elem表示事件对象Event， 并不是传入的$foot
因为在index.js中的scorll和resize事件函数中传入了$foot，导致此时的$foot表示事件对象Event，所以会出现报错，去掉就好了
如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题