作为菜鸟站长，要做出一点网站效果真的是很不容易呀！原来就一直想将自己的就爱买网站实现某div块页面在浏览器下拉到某位置时保持置顶不动。今天终于被我实现了，好兴奋的说。我是用别的有这个效果的网站苦逼一步步尝试，排除的方法找到答案的，不管怎么样终于还是实现了自己想要的效果，网上这方面的答案很多，但如果你是菜鸟的话，真心是看不懂。现在就来详细教大家怎么做吧！
首先大家可以去看看效果，打开http://www.9aimai.com/article-1353-1.html 这个页面往下拉的时候，你会看到出现一个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 冲突的解决办法
