플로팅 수직 탐색 메뉴를 사용하고 위치를 조정하는 방법은 무엇입니까?

나는 잠시 동안 이것에 있었고 나는 막 붙어있다. Win XP, IE8 및 JQuery 1.4.4를 사용하고 있습니다.플로팅 수직 탐색 메뉴를 사용하고 위치를 조정하는 방법은 무엇입니까?

내가 원하는 것은 탐색 메뉴가 헤더 아래에서 시작한다는 것입니다. 그러나 머리글이 보이지 않으면 탐색 메뉴가 스크롤 된 창의 맨 위에 머물러있게됩니다. 사용자가 다시 스크롤하고 헤더가 다시보기로 돌아 오면 탐색 메뉴가 헤더 아래에 다시 있어야합니다.

지금은 부동이지만 원하는 방식으로 조정할 수 없습니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Please make this scrolling work</title> 
    <link href="Styles/Navigation.css" rel="Stylesheet" type="text/css" /> 
    <script src="Scripts/jquery-1.4.4.min.js" language="javascript" type="text/javascript"></script> 
    <script language="javascript" type="text/javascript"> 
     $(document).ready(function() { 
      $(window).scroll(function() { 
       //var bottom = $('#contents').height() + 100; 
       var bottom = $(window).height(); 
       var top = $('#header').height(); 
       var top_start = top + 1; 
       var top_limit; 
       if (document.body.scrollTop <= top_start) { 
        top_limit = top_start; 
       } 
       else { 
        top_limit = 0; 
       } 
       $('#menu-bar').css('top', (top_limit) + "px"); 
       //$('#menu-bar').css('bottom', (bottom) + "px"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="header" style="clear:both;height:40%;"> 
     stuff 
     <br /> 
     <br /> 
     more stuff 
     <br /> 
    </div> 
    <div class="menu-bar" style="float:left;width:25%;" id="menu-bar"> 
      <ul> 
       <li><a href="#mainpage">Main Page</a> 
        <ul> 
         <li><a href="#search">Search</a></li> 
         <li><a href="#foo">Foo</a></li> 
         <li><a href="#bar">Bar</a></li> 
         <li><a href="#baz">Baz</a></li> 
         <li><a href="#blah">Blah</a></li> 
        </ul> 
       </li> 
      </ul> 
    </div> 
    <div id="contents" style="float:left;margin-left:25%;"> 
     olwqfjapnwvqjpfqjwfeoqjfepqfewjqpfjnqpefpkqjmewpofqne 
     <br /> 
     powjunvejpqlewkjrvqpnewkjmqwofvjnewpfoqewkjponqejpewfmqewp 
     <br /> 
    </div>

그리고 메뉴의 CSS :

.menu-bar{ 
    position: fixed; 
    overflow:scroll; 
    height:100%; 
    /*top:0; 
    bottom:0;*/ 
}

편집 : 이 수정 프로그램이었다

다음은 내가 해봤 코드입니다.

<script language="javascript" type="text/javascript"> 
     $(window).scroll(function() { 
      //var bottom = $('#contents').height() + 100; 
      var bottom = $(window).height(); 
      var top = $('#header').height(); 
      var top_start = top + 1; 
      var top_limit; 
      if ($(window).scrollTop() <= top_start) { 
       top_limit = top_start; 
      } 
      else { 
       top_limit = 0; 
      } 
      $('#menu-bar').css('top', (top_limit) + "px"); 
      $('#menu-bar').css('bottom', (bottom) + "px"); 
     }); 
    </script> 
    </div> 
    </form> 

</body> 
</html>

나는 아주 이해가 안하지만 왜 :

top_limit = 0; //works but... 
top_limit = $(window).scrollTop(); //doesn't work.

출처

2012-06-14 dotnetN00b

당신은 우리에게 온라인 예제를 보여줄 수 있습니까? –

나는 이것을 어딘가에서 해 봤습니다. 기억할 수있는 것부터'.offset()'과'.position()'을 보시기 바랍니다. –

이 http://jsfiddle.net/joycse06/9tSAJ/ –

나는 당신이 필요가 사용자의 화면 위에 얼마나 많은 공간이 계산하는 것입니다 생각합니다. 당신은

이

$(document).height() // this will give you the size of the whole document

이

window.innerHeight // this will give you the size of the screen

이

window.pageYOffset // this will give you how much you had scrolled vertically

긴 시간으로 비슷한 효과를 만들기 위해 함수를 한 것으로 계산해야 당신이 필요로 할 때, 나는 머리글이 보이지 않으면 메뉴가 맨 위에 머물러 있어야한다고 요구했다. 헤더는 제발 종류, 나는이 도움이 당신을 희망 실수가 있다고 생각하면이 오래된 코드 200 픽셀

function scrollControl(){ 
    if(($(document).height() - (window.innerHeight + window.pageYOffset))<=500){ 
     //what to do if the space below is 500px or less, for the footer 
    }else if(window.pageYOffset>=200){ 
     //what to do if the space above is 200px or more, for the header 
    }else{ 
     //what to do if the element was in the rest of the space 
    } 
}

했다.

출처

2012-06-14 16:20:35 mechdeveloper

플로팅 수직 탐색 메뉴를 사용하고 위치를 조정하는 방법은 무엇입니까?

답변

관련 문제