tisdag 23 februari 2016

CSS always on top, And some code

CSS always on top,
"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