如何用js实现某div块页面在浏览器下拉到某位置时保持置顶不动

作为菜鸟站长,要做出一点网站效果真的是很不容易呀!原来就一直想将自己的就爱买网站实现某div块页面在浏览器下拉到某位置时保持置顶不动。今天终于被我实现了,好兴奋的说。我是用别的有这个效果的网站苦逼一步步尝试,排除的方法找到答案的,不管怎么样终于还是实现了自己想要的效果,网上这方面的答案很多,但如果你是菜鸟的话,真心是看不懂。现在就来详细教大家怎么做吧!

首先大家可以去看看效果,打开http://www.9aimai.com/article-1353-1.html  这个页面往下拉的时候,你会看到出现一个DIV块,并且这个DIV块会随着滚动下拉一直保持在置顶的位置。这个做法其实两部就可以实现:

div随着浏览器下拉而不动
div随着浏览器下拉而不动

1、头部调用jquery-1.10.2.min.js,关于这个文件哪里来,你网上搜一下有可以下载的,具体代码如下(路径自己根据自己的更改):
<script src=”./jquery-1.10.2.min.js” type=”text/javascript”></script>

2、在你要置顶放div块的地方输入以下代码

<div id=”floatUpDiv”></div>
<div id=”floatDiv”>
<a data-type=”4″ data-tmpl=”390×460″ data-tmplid=”134″ data-style=”2″ data-border=”1″ biz-s_logo=”1″ biz-s_hot=”1″ href=”#”>爱淘宝</a>
</div>
<script language=javascript>
$(window).scroll(function(){
var floatUpDiv = $(“#floatUpDiv”);
var floatDiv = $(“#floatDiv”);
var footDiv = $(“#foot”);

if((floatUpDiv.offset().top + floatUpDiv.height() + floatDiv.height()) < ($(document).scrollTop() + $(window).height())) {
floatDiv.fadeIn();
}
else {
floatDiv.fadeOut();
}

if((floatUpDiv.offset().top + floatUpDiv.height() – $(document).scrollTop()) < 0) {
floatDiv.css(“position”, “fixed”);
floatDiv.css(“top”, “0px”);
if(floatDiv.offset().top + floatDiv.height() > $(document).height() – footDiv.height() – 300) {
var top = $(document).height() – footDiv.height() – 300 – floatDiv.offset().top – floatDiv.height();
floatDiv.css(“top”, top + “px”);

}
}
else {
floatDiv.css(“position”, “”);
floatDiv.css(“top”, “”);
}
});
</script>

 

其中红色部分是可以自己更改的。这样效果就实现了,是不是很神奇呀!!哈哈

——————————————————————————————–

更新,出现新的问题,jquery-1.10.2.min.js 和jquery.js文件会起冲突(会导致登录、上传图片等功能出现问题),网上搜索了方法,说是可以按照:http://www.w3school.com.cn/jquery/core_noconflict.asp 这种方法尝试解决 。但作为菜鸟还是不知道具体怎么解决,我的临时方案是,不把jquery-1.10.2.min.js 放在头部,而是只放在自己要放的页面,这样就不太会有影响,最多是在你放jquery-1.10.2.min.js 的页面登录会有一些问题!希望以后能尽快找到解决办法解决这个问题,有知道的朋友也可以给我留言,或者加我QQ。非常感激

问题已解决,答案请点击:discuz中jquery.js 和 jquery-1.10.2.min.js 冲突的解决办法

About the author

杰夫(jerfo0)

杰夫(jerfo0)

一个活的真实,耿直的boy。
坚定相信爱情,向往自由,对世界充满好奇心。热爱美剧、海贼王、一切户外运动、旅行...
职业:互联网运营。
生命不息,折腾不止,燥起来!!

View all posts

发表评论

电子邮件地址不会被公开。 必填项已用*标注