制作不随浏览器滚动的DIV-带关闭按钮

制作不随浏览器滚动的DIV

  效果见 http://bbs.csdn.net/topics/90292438  的滚动效果。

  $(function(){
      //获取要定位元素距离浏览器顶部的距离
      var navH = $(".detail_title_fixed").offset().top;
      $(".detail_title_fixed").hide();

      var show_detail_title_fixed = true;
      //滚动条事件
      $(window).scroll(function(){

          //获取滚动条的滑动距离
          var scroH = $(this).scrollTop();

          //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
          if(show_detail_title_fixed){
              if(scroH>=navH){
                  $(".detail_title_fixed").css({"position":"fixed","top":"0","border":"1px #198cc5 solid","z-index":"99999"});
                  $(".detail_title_fixed").show();
              }else if(scroH<navH){
                  $(".detail_title_fixed").css({"position":"static"});
                  $(".detail_title_fixed").hide();
              }
          }
      });

      $("#close_detail_title_fixed").click(function(){
          show_detail_title_fixed = false;
          $(".detail_title_fixed").hide();
      });

  })