스크롤을 내리면 중간메뉴가 상단에 고정되게 작업을 했습니다.

각 메뉴 카테고리마다 해당 위치로 가면 스타일이 바뀌게 까지 작업을 했습니다.

문제는, 크롬에서는 이상이 없는데 익스플로러에서

메뉴 클릭시 해당 메뉴부분 스타일이 활성화가 안됩니다.

아래 소스 보시면 이해가 쉬을듯 합니다.

빨간색으로 표기한 스타일 부분에 높이값을 주면 이상없이 보여지긴 하는데, 각 영역마다 강제로 높이값을 줄수는 없는 상황입니다.

어떤 부분이 문제인지 아시는분 계실까요..이것저것 시도해봐도 안되네요;;

------------------------------------------------------------------------------------

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<style type="text/css">
*{padding:0;margin:0;}
.tabBt {overflow:hidden; position:absolute; top:0; text-align:center; width:100%; z-index:9;}
.tabBt li {width:200px; display:inline-block; font-size:17px;}
.tabBt li a {display:block; padding:10px; border:1px solid #ddd; background:#fff; text-align:center; color:#666;}
.tabBt li.on a { padding:10px; border:1px solid #007daa; background:#fff; color:#007daa;}

/*아래 부분 패딩값말고 height:1200px; 와같이 높이값을 주면 이상없이 보여짐*/
#sCon01 { padding:600px 0; background:#ccc;}
#sCon02 { padding:600px 0; background:#ddd;}
#sCon03 { padding:600px 0; background:#eee;}
</style>

<script type="text/javascript">
 //<![CDATA[
  $(document).ready(function(){
   tabScroll(".tabBt");
  });
  function tabScroll(id){
   var tabId = $(id);
   var tabIdtop = tabId.offset().top;
   var tabIdHe = tabId.height();

   $(window).scroll(function(){
    if ($(this).scrollTop() >= tabIdtop) {
     tabId.css({"position":"fixed"});
    } else {
     tabId.css({"position":"absolute"});
    }
   });

   tabId.find("li").each(function(){
    var liThis = $(this);
    var divId = liThis.find("a").attr("href");
    var divIdtop = $(divId).offset().top-tabIdHe;
    liThis.bind("click", function(e){
     e.preventDefault();
     $('body,html').animate({scrollTop: divIdtop},300);
    });
    $(window).scroll(function(){
     if ($(this).scrollTop() >= divIdtop ) {
      liThis.addClass("on").siblings().removeClass("on");
     }
    });
   });
  }
</script>

<div class="sub_content">
    <ul class="tabBt">
  <li class="on"><a href="#sCon01">메뉴1</a></li>
  <li><a href="#sCon02">메뉴2</a></li>
  <li><a href="#sCon03">메뉴3</a></li>
 </ul>

 <div id="sCon01">111</div>
 <div id="sCon02">222</div>
 <div id="sCon03">333</div>

</div>

------------------------------------------------------------------------------------