스크롤 div가 고정되어 다시 스크롤됩니다.

전폭 이미지가 맨 위에 있고 오른쪽에는 텍스트 콘텐트가있는 페이지 레이아웃이 있습니다. 왼쪽에는 소셜 링크가있는 작은 스크롤 div가 있습니다.스크롤 div가 고정되어 다시 스크롤됩니다.

http://blog.teamtreehouse.com/building-a-jquery-sticky-sidebar-navigation-menu (소셜 링크 스크롤 후 고정되고 다른 div에서 스크롤). 여기

는 예이지만, 아래의 퍼즐의 마지막 조각없이 : 우리는 빨간색 바닥 글에 도착하면 http://jsfiddle.net/nwFrg/

  function sticky_relocate() { 
      var window_top = jQuery(window).scrollTop(); 
      var div_top = jQuery('#e-c-r-top').offset().top ; 
      if (window_top > div_top) 
      jQuery('.socialbar-left').addClass('fixedsocialbar') 
      else 
      jQuery('.socialbar-left').removeClass('fixedsocialbar'); 
      } 
     // If you have jQuery directly, use the following line, instead 
     jQuery(function() { 
     // If you have jQuery via Google AJAX Libraries 
     // google.setOnLoadCallback(function() { 
      jQuery(window).scroll(sticky_relocate); 
      sticky_relocate(); 
      });

, 나는 중지하고 거기에 머물 수있는 '안녕하세요 상자'를 원하는 정렬 아래쪽으로 스크롤 할 때까지 (예를 들어, 사람이 다시 위로 스크롤 할 때까지 모든 것이 역순으로 일어나야합니다.)

js가 스크롤에서 고정 (내 예제에 있음)으로 이동 한 다음 세 번째 트리거 아래쪽에, 나는 이미 CSS를 바닥에 정렬됩니다, 그냥 js 방아쇠가 필요 알아.

설명해 드리겠습니다. OK.

출처

2013-04-09 Jim

"하단에 정렬"부분을 명확히 해 주실 수 있습니까? 빨간색 바닥 글이 창 상단에 도달하면 _hello 상자를 어디에두고 싶은지 잘 모르겠습니다. – andyb

헬로우 박스가 하단 빨간색 상자 (바닥 글)에 도착하면 http://img41.imageshack.us/img41/3735/demoy.gif 왼쪽 div 및 오른쪽 내용을 모두 새 div에 래핑해야합니다. 그것이 정렬되어야하는 것입니다. – Jim

실제로, 여기 내가 소셜 링크를 찾고있는 것을 발견했습니다 : http://blog.teamtreehouse.com/building-a-jquery-sticky-sidebar-navigation-menu 스크롤을 내려 가면서 어떻게 멈추는 지보십시오. 페이지의 맨 아래에? – Jim

전체 고정/스크롤 스위치를 사용하지 않아도됩니다. 대신 javascript에서 범위의 상단과 하단을 제한하십시오. 사용자가 양쪽 끝을지나 스크롤하면 해당 숫자를 무시하고 대신 최소/최대 값을 사용합니다. (페이지에서 해당 요소의 위치를 읽음으로써 최대/최소를 얻을 수 있습니다.)

출처

2013-04-09 15:29:48

나는 슬프게도 0- 정말로 프로그래머가 아니다. 나는 플러그인 digg digg가 정확히 맞은 정렬 (위 참조)을하고 있지만 플러그인이 너무 무거워 보였다. – Jim

스크롤 div가 고정되어 다시 스크롤됩니다.

답변

관련 문제