公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果,例如:
这个在很早以前其实已经写过,请移步:https://www.7psus5.com/archives/1943
当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了,position:fixed,可以在IE7+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,使用position:absolute属性代替,重新计算top值。
具体代码如下:
[code=”javascript”]
/**
* @author
* 类似于新浪微博新消息提示的定位框
* 更多https://www.7psus5.com/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]
我也写了个,但我故意忽略了IE6,谁让它不支持fixed的,更是谁让你用ie6的,哈哈~
话说这个,我也写过,其他的都好办,就是ie6需要特别的处理一下
这个是这次腾讯夏招复试考题之一。:P
不会吧,腾讯试题这么简单啊!
@,
@这个插件如果做到二级弹出就不好实现了吧, 没看懂你的意思,不好意思!
头疼的代码“`
相信LZ 是自己写的
演示代码里“回到相关文章”链接还是#号呢,没起到预想的作用。:)
谢谢!马上去修复!
return $(this).each(function() {
FixedFun($(this));
});这里的return是干嘛用的?菜鸟提问。也不是为了jquery的链式操作。去掉了return也一样没有发现什么问题。
楼主可以去掉$(window).scroll(function() {})对其他浏览器的判断,这样比较好点:
if(ie6){
$(window).scroll(function() {})
}