最近想要改造一下囧客圈
为长文章的侧边栏加入只能浮动的div.
在网上找到了几种解决办法:
0.显示要加载一下jq库,随便选,国外有用户就用google的,国内有用户就用百度或者新浪的.
1.
<script type="text/javascript">
$(function() {
var offset = $("#text-3").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#text-3").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#text-3").stop().animate({
marginTop: 0
});
};
});
});
</script>
2.
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
$("#float").smartFloat();
3.
js:
(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
else{oDiv.className="div1";}
};
}
})();
html:
<div id="box">
<div id="float" class="div1">
//随滚动移动的部分代码
</div>
</div>
css:
#box{float:left;position:relative;width:295px;}
.div1{}
.div2{position:fixed;_position:absolute;top:3px;z-index:295;}
侧边栏智能浮动最核心的实现思路是什么?
本质是监听页面滚动位置,判断元素是否越过初始阈值;超过后把元素切换为 fixed 或通过脚本调整 top/marginTop,让它看起来一直跟着页面移动。关键是先算准初始 offset,再处理回滚时的复位。
jQuery 和原生 JavaScript 方案有什么区别?
jQuery 写法更短,适合快速改造现有页面;原生 JavaScript 依赖更少,适合想减少库依赖的场景。两者思路一致,都是监听滚动并修改样式,差别主要在代码量、兼容处理和维护成本。
旧浏览器下做浮动效果要注意什么?
要特别注意 fixed 定位兼容性。文章里的做法会判断浏览器能力,兼容不足时改用绝对定位并动态计算 top,避免浮动模块错位或失效。实际使用时还要确认容器布局不会被浮动打乱。







发表回复