当用户向上或向下滚动页面到一定位置时，目标元素开始固定定位（position:fixed），当回滚到原位置时目标元素恢复到原状态，可以定制触发滚动相对屏幕位置和触发滚动方向，兼容IE6
【插件参数】
$(".target_element").scrollFix( [ "top" | "bottom" | length(可以为负,表示相对bottom), [ "top" | "bottom" ] ]);
第一个参数： 可选，默认为"top"，当目标元素到了屏幕相对的位置时开始触发固定，可以填一个数值，如100,-200 ,负值表示相对于屏幕下方
第一个参数： 可选，默认为"top"，表示触发固定的滚动方向，"top"表示从上向下滚动时触发，"bottom"表示从下向上滚动时触发
【下载插件】scrollFix(jb51.net).rar
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">
<script type="text/javascript" src="/UploadFiles/2021-04-02/scrollFix.js">
<p><span style="color: #808000;">【代码示例】</span></p>
<div class="d">
<div class="demo" style="background: #ff6000;">$("#a").scrollFix(-200);
<div>滚动到距离下面200px时开始固定，默认从上到下触发</div>
</div>
</div>
<div class="d">
<div class="demo" style="background: #82BF00;">$("#b").scrollFix(200,"bottom");
<div>滚动到距离上面200px时开始固定，指定"bottom"从下到上触发</div>
</div>
</div>
<div class="d">
<div class="demo" style="background: #0C9CAE;">$("#c").scrollFix("top","top");
<div>滚动到距离上面0时开始固定，指定"top"从上到下触发</div>
</div>
</div>
<div class="d">
<div class="demo" style="background: #478FCE;">$("#d").scrollFix("bottom","top");
<div>滚动到距离下面0时开始固定，指定"bottom"从下到上触发</div>
</div>
</div>
实现代码：
复制代码 代码如下:
<script type="text/javascript">// <![CDATA[
window.onload=function(){
$(".demo:eq(0)").scrollFix(-200);
$(".demo:eq(1)").scrollFix(200,"bottom");
$(".demo:eq(2)").scrollFix("top","top");
$(".demo:eq(3)").scrollFix("bottom","bottom");
}
// ]]></script>
核心代码：
;(function($) {
jQuery.fn.scrollFix = function(height, dir) {
height = height || 0;
height = height == "top" "bottom") {
height = document.documentElement.clientHeight - this.scrollHeight;
} else if (height < 0) {
height = document.documentElement.clientHeight - this.scrollHeight + height;
}
var that = $(this),
oldHeight = false,
p, r, l = that.offset().left;
dir = dir == "bottom" "top"; //默认滚动方向向下
if (window.XMLHttpRequest) { //非ie6用fixed
function getHeight() { //>=0表示上面的滚动高度大于等于目标高度
return (document.documentElement.scrollTop || document.body.scrollTop) + height - that.offset().top;
}
$(window).scroll(function() {
if (oldHeight === false) {
if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
oldHeight = that.offset().top - height;
that.css({
position: "fixed",
top: height,
left: l
});
}
} else {
if (dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) {
that.css({
position: "static"
});
oldHeight = false;
} else if (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight) {
that.css({
position: "static"
});
oldHeight = false;
}
}
});
} else { //for ie6
$(window).scroll(function() {
if (oldHeight === false) { //恢复前只执行一次，减少reflow
if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
oldHeight = that.offset().top - height;
r = document.createElement("span");
p = that[0].parentNode;
p.replaceChild(r, that[0]);
document.body.appendChild(that[0]);
that[0].style.position = "absolute";
}
} else if ((dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) || (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight)) { //结束
that[0].style.position = "static";
p.replaceChild(that[0], r);
r = null;
oldHeight = false;
} else { //滚动
that.css({
left: l,
top: height + document.documentElement.scrollTop
})
}
});
}
});
};
})(jQuery);
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。