智能悬浮的基本思路：判断滚动方向=》得知定位=》跟随底部或者顶部=》改变元素位置

smart_fixed.js

$(function () {
        var $J_onPopup = $('#J-onPopup');
        var $J_popup = $('#J-popup');
        var $win = $(window);
        var $body = $("body");
         var wheel_arrow = $("<div style='position: absolute;'></div>");
        $body.append(wheel_arrow);
      var all_height = $body.height();//$win.outerHeight();
      var win_height = $win.height();
        
      function resetPosiction(obj){
        var topset = $win.scrollTop(),
            arrow = wheel_arrow.offset().top<topset?"down":"up",
            height = obj.height(),
            obj_offset_top = obj.offset().top;
        //console.log(topset,height,all_height);
        console.log(arrow);
        if(arrow ==="down"){//down
          var dieLine = topset+win_height;
          //console.log(obj_offset_top,dieLine,(obj_offset_top+height));
          if(!(dieLine>obj_offset_top&&obj_offset_top<(obj_offset_top+height))){
            obj.css("top",topset);
          }else{
            obj.css("top",dieLine-height);
          }
        }else{//up
        
          var dieLine = topset+win_height;
          //console.log(obj_offset_top,dieLine,(obj_offset_top+height));
          if(dieLine>obj_offset_top&&obj_offset_top<(obj_offset_top+height)){
            obj.css("top",topset);
          }else{
            obj.css("top",dieLine-height);
          }
        }
        wheel_arrow.css("top",topset);
      }

        $J_onPopup.on('click', function () {
          $J_popup.show();
          resetPosiction($J_popup);
          //resetHeight($J_popup);
        });

        $win.on({
            "resize": function () {
              //resetHeight($J_popup, $(this).scrollTop());
            },
            "scroll": function () {
              //resetHeight($J_popup, $(this).scrollTop());
              resetPosiction($J_popup);
            }
        });


      //console.log($win.height() + ' 可视范围');
      //console.log($(document).outerHeight() + ' 总高度');








        /*console.log($(window).height() + ' 1浏览器当前窗口可视区域高度'); //浏览器当前窗口可视区域高度
        console.log($(document).height() + ' 2浏览器当前窗口文���的高度'); //浏览器当前窗口文档的高度
        console.log($(document.body).height() + ' 3浏览器当前窗口文档body的高度');//浏览器当前窗口文档body的高度
        console.log($(document.body).outerHeight(true) + ' 4浏览器当前窗口文档body的总高度 包括border padding margin');//浏览器当前窗口文档body的总高度 包括border padding margin
        console.log($(window).width() + ' 浏览器当前窗口可视区域宽度'); //浏览器当前窗口可视区域宽度
        console.log($(document).width() + ' 浏览器当前窗口文档对象宽度');//浏览器当前窗口文档对象宽度
        console.log($(document.body).width() + ' 浏览器当前窗口文档body的高度');//浏览器当前窗口文档body的高度
        console.log($(document.body).outerWidth(true) + ' 浏览器当前窗口文档body的总宽度 包括border padding margin ');//浏览器当前窗口文档body的总宽度 包括border padding margin*/
    });