jquery_jquery를 기반으로 하는 Sina Weibo 새 메시지 프롬프트와 유사한 용량 고정 포지셔닝 상자

렌더링:

브라우저가 스크롤될 때 부동 레이어를 브라우저 인터페이스 뷰포트에서 제거하려면 위치 속성을 수정하여 창의 위쪽 가장자리에 부동 및 표시되도록 하면 됩니다. , position:fixed는 IE7 및 기타 브라우저에서 부동 레이어를 원활하고 고정적으로 배치할 수 있습니다. IE6 이전 버전은 고정 속성을 지원하지 않으므로 상위 값을 다시 계산하는 대신 position:absolute 속성을 사용하세요.
구체적인 코드는 다음과 같습니다.
HTML 코드:

코드 복사 코드는 다음과 같습니다.

새 비공개 메시지 1개, 비공개 메시지 보기

새 메시지 10개, 메시지 보기

108명의 새로운 팬,

닫기>

CSS 코드:

코드 복사 코드는 다음과 같습니다. :

.float { 너비:200px; 테두리:1px 글꼴-크기:12px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0 ,.2) ; 위치:절대값; -webkit-border-radius:5px;
.float .close-ico{ 위치: 절대값: 5px; 오른쪽: 5px; 높이:16px; text-indent:-900px }
.close-ico :hover{ 배경 위치:0 -16px;}
.float p{ 줄 높이:22px}

JS 코드:

코드 복사 코드는 다음과 같습니다.

/**
* @author Fool's Pier
* Sina Weibo의 새 메시지 프롬프트와 유사한 위치 지정 상자
* 더보기
*/
(함수($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.defnt,options)

var FixFun = 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: 스크롤
}
}else {
element.css({
위치: "절대",
top: 상단
})
}
}); ".close-ico") .click(function(event){
element.remove();
event.preventDefault();
})
}
return $(this ).each(function() {
FixedFun($(this));
})
$.fn.capacityFixed.defnt={
right : 100,/ /페이지 너비를 기준으로 오른쪽 위치 지정
top:100,
pageWidth : 960
})(jQuery);