【jQuery插件】capacityFixed-类似于新浪微博新消息提示的定位框

公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果,例如:

这个在很早以前其实已经写过,请移步:https://www.html.cn/archives/1943

当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了,position:fixed,可以在IE7+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,使用position:absolute属性代替,重新计算top值。

具体代码如下:

[code=”javascript”]
/**
* @author
* 类似于新浪微博新消息提示的定位框
* 更多https://www.html.cn/archives/3515
*/
(function($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);

var FixedFun = function(element) {
var top = opts.top;
var right = ($(window).width()-opts.pageWidth)/2+opts.right;
element.css({
“right”:right,
“top”:top
});
$(window).resize(function(){
var right = ($(window).width()-opts.pageWidth)/2+opts.right;
element.css({
“right”:right
});
});
$(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
});
}
});
element.find(“.close-ico”).click(function(event){
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt={
right : 100,//相对于页面宽度的右边定位
top:100,
pageWidth : 960
};
})(jQuery)
[/code]

调用:
[code=”javascript”]
$(“#float”).capacityFixed({
right : 100,//相对于页面宽度的右边定位
top:100,
pageWidth : 960
});
[/code]

查看demo:https://www.html.cn/demo/capacityFixed/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【jQuery插件】capacityFixed-类似于新浪微博新消息提示的定位框

评论 15

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    我也写了个,但我故意忽略了IE6,谁让它不支持fixed的,更是谁让你用ie6的,哈哈~

    wo_is神仙8年前 (2011-04-28)回复
  2. #-48

    话说这个,我也写过,其他的都好办,就是ie6需要特别的处理一下

    crossyou8年前 (2011-04-28)回复
  3. #-47

    这个是这次腾讯夏招复试考题之一。:P

    堂主8年前 (2011-04-28)回复
  4. #-46

    头疼的代码“`

    佐蓝8年前 (2011-04-29)回复
  5. #-45

    相信LZ 是自己写的

    jackyang8年前 (2011-05-26)回复
  6. #-44

    演示代码里“回到相关文章”链接还是#号呢,没起到预想的作用。:)

    Apple8年前 (2011-06-13)回复
    • 谢谢!马上去修复!

      8年前 (2011-06-13)回复
  7. #-43

    return $(this).each(function() {
    FixedFun($(this));
    });这里的return是干嘛用的?菜鸟提问。也不是为了jquery的链式操作。去掉了return也一样没有发现什么问题。

    jzm171737年前 (2011-09-02)回复
  8. #-42

    楼主可以去掉$(window).scroll(function() {})对其他浏览器的判断,这样比较好点:
    if(ie6){
    $(window).scroll(function() {})
    }

    redhu7年前 (2011-11-16)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏