2012-06-29 3 views
1

방문자가 웹 사이트를 아래로 스크롤 할 때 아래쪽으로 스크롤되는 사이드 바 div가 있습니다. 문제는, 그것이 아래로 줄곧 스크롤하지 않고, 나는 그것이 왜 있는지에 관해 계산했다.jquery scroll div - 페이지가 완전히로드되면 문서 높이를 계산 하시겠습니까?

코드가로드되는 즉시 스크립트에서 문서의 높이를 계산한다고 가정하겠습니다. 그러나 웹 사이트에서 이미지가 계산을 완료 한 후에 아직로드되지 않은 다른 크기로 표시됩니다. 한 번 클릭하면 다른 크기로 주 이미지.

각 이미지의 높이를 설정하면 올바르게 스크롤됩니다. 그러나 라이브 웹 사이트에서 동적으로 생성되는 이미지 크기를 아는 것은 불가능합니다.

모든 이미지가로드 된 후 스크립트가 문서 높이를 계산할 수있는 방법이 있습니까? 아니면 다른 것이 효과가 있을까요? .

var documentHeight = 0; 
var topPadding = 15; 
$(function() { 
    var offset = $("#sidebar").offset(); 
    documentHeight = $("#maincontainer").height(); 
    $(window).scroll(function() { 
     var sideBarHeight = $("#sidebar").height(); 
     if ($(window).scrollTop() > offset.top) { 
      var newPosition = ($(window).scrollTop() - offset.top) + topPadding; 
      var maxPosition = documentHeight - (sideBarHeight + 0); 
      if (newPosition > maxPosition) { 
       newPosition = maxPosition; 
      } 
      $("#sidebar").stop().animate({ 
       marginTop: newPosition 
      }); 
     } else { 
      $("#sidebar").stop().animate({ 
       marginTop: 0 
      }); 
     }; 
    }); 
}); 
+0

$ (window) .load (function()')를 사용하여 $ (function()')을 호출하고, DOM을로드 한 직후에 이미지를 포함하는 모든 페이지 에셋을로드 한 후 실행합니다. /stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load – Sparky

답변

-1

겠습니까

$ ('몸') 높이()

일 : 여기

코드인가? 나는 내 웹 페이지에 같은 종류의 스크립트를 사용하고 있는데 이것은 내 웹 페이지의 높이를 결정하는 데 사용됩니다.

내가 원하는 코드가 아니거나 원하는대로 작동하지 않는 경우 코드가 더 많이 생깁니다.

편집 : 당신이 당신의 window.scrollTop 대신 documentHeight를 호출 이후에 다음

$(document).ready(function() { 
    var documentHeight = $('body').height() 
}); 

합니다. body 높이가 뷰포트 크기에 따라 다르므로

1

$('body').height()이 작동하지 않습니다.

또한 document.ready는 이미지가로드 될 때까지 기다리지 않습니다. 즉, 높이 속성이없는 페이지에 이미지가있는 경우 최종로드 된 DOM이 더 높아집니다. (. 마음 메모를)

은 스스로를 시도 http://jsfiddle.net/vww42sqm/

을 또는 가지고이 :

$(document).ready(function() { 
    var documentHeight = $(document).height() 
    console.log('document height (document.ready): ' + documentHeight); 
}); 


$(window).load(function() { 
    var documentHeight = $(document).height() 
    console.log('document height (window.load): ' + documentHeight); 
}); 
당신은`교체하여`$ (문서) .ready (함수()`(또는 시도 할 수