首页 » 技术分享 » 全兼容的居中式靠边浮层代码(css+div)

全兼容的居中式靠边浮层代码(css+div)

 

.float_menu{ z-index:20; position:fixed; width:46px; top:150px; left:50%; margin-left:-528px;}
.float_menu{_position:absolute;_top:expression_r(150 + documentElement.scrollTop +"px");}

 

窗口变化控制JS

 window.οnresize=set_float_menu_style;
     $(document).ready(function(){
     set_float_menu_style();
    });
 function set_float_menu_style() {
      var jump_style = "normal";
      if(jump_style == 'normal'){
        if (document.body.clientWidth > 1028  && $(".float_menu").size()>0) {
         $(".float_menu").css("display","");
        } else if(document.body.clientWidth <= 1028 && $(".float_menu").size()>0) {
            $(".float_menu").css("display","none");
        }
      }
    }

 

 第二种写法

window.οnresize=set_float_menu_style;
     $(document).ready(function(){
         set_float_menu_style();
    });
     function set_float_menu_style() {
       
        $(window).scroll( function() {
            //alert($("body").height());
            var position = $("#J_aside_nav").css('position');
            var offset = $("#J_aside_nav").offset();
            var scrollOffset = $(window).scrollTop();
            var bodyHeight = $("body").height();
            var menuHeight = $("#J_aside_nav").height();
            var menuHeightOffset = bodyHeight - menuHeight;
           
            if(menuHeightOffset > scrollOffset){
                var menuTop = scrollOffset + 6 ;
                }
            else{
                var menuTop = menuHeightOffset;
                }
            if (scrollOffset > 200) {
                 $("#J_aside_nav").addClass("float_menu");
                if(position == 'absolute'){
                    $("#J_aside_nav").css("top" , menuTop +"px");
                    }
                 else{
  

转载自原文链接, 如需删除请联系管理员。

原文链接:全兼容的居中式靠边浮层代码(css+div),转载请注明来源!

0