"Ensure
position is on your element and set the z-index to a value higher than the elements you want to cover."http://stackoverflow.com/questions/21386306/css-always-on-top
A really good Fiddle http://jsfiddle.net/raving/0mLzseby/
And some code
element {
position: fixed;
z-index: 999;
}
function sticky_relocate() {
var window_top = $(window).scrollTop();
//var offset = jQuery(this).css('offset');
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky').removeClass('cheating');
} else {
$('#sticky').removeClass('stick');
$('#sticky').addClass('cheating');
}
}
$(function () {
var mystyle = '<style> #sticky {right: 270px; padding: 0.5ex; width: 80px;height:150px; background-color: #333; color: #fff; font-size: 2em; border-radius: 0.5ex;}#sticky.cheating {position: fixed; z-index: 10000;} #sticky.stick { position: fixed; top: 0; z-index: 10000; border-radius: 0 0 0.5em 0.5em;</style>}'
$('head').prepend(mystyle);
var anchorStick = ''+
'<div id="sticky-anchor"></div> <div id="sticky" style"position: fixed; right: 0px;">'+
'<div class="gov_weixin_share" style="top: 156px; right: 359px;">' +
'<div class="closeBtn" style="font-size:12px;text-align:right;height:15px;padding-top:1px;">' +
'<img src="http://www.gov.cn/govweb/xhtml/images/public/close140403.gif" style="cursor:pointer;"/>' +
'</div>' +
'<div class="gov_wx fixed" style="font-size:12px;text-align:right;height:15px;padding-top:5px;"><img src="http://www.gov.cn/govweb/xhtml/images/public/public_weixin.jpg">' +
'<p>中国政府网<br><a href="http://www.gov.cn/foot/2014-02/18/content_2611908.htm" target="_blank">微博、微信</a></p> ' +
'</div> ' +
'</div> ' +
'</div>';
$('#content').prepend(anchorStick);
$(window).scroll(sticky_relocate);
sticky_relocate();
$(".closeBtn").click(function(){$("#sticky").hide()});
});
Inga kommentarer:
Skicka en kommentar