플로팅 이미지 엉망진창 부트 스트랩 Scrollspy

부트 스트랩을 사용하여 페이지를 설정했습니다. (http://ethnoma.org/about.html) 사이드 바 탐색이 첨부되어 있습니다 (위대한 작업 중입니다). 나는 또한이 네비게이션에서 부트 스트랩 scrollspy를 사용하고 네비게이션의 모든 링크는 같은 페이지 (ancors 사용) 내에 있습니다. 모든 것이 잘 작동했습니다 (심지어 부드러운 스크롤 플러그인이 추가 된 경우에도). 나는이 스크립트를 호출하여 모든 내용이 페이지에 추가 된 후 Scrollspy가 새로 고침되도록 강제해야했습니다 (<head>에 위치).플로팅 이미지 엉망진창 부트 스트랩 Scrollspy

<script type="text/javascript"> 
// ScrollSpy 
$(function() { 
    $('[data-spy="scroll"]').each(function() { 
     var $spy = $(this).scrollspy('refresh') 
    }); 
}); 
</script>

고객이 페이지에 이미지를 추가하도록 요청했습니다. 그래서 다음과 같이 부트 스트랩 마크 업과 CSS 클래스를 사용 않았다 부모 (이 경우) 오른쪽에있는 ""태그 플로트를 만들고 블록 요소에 IMG하게

<a class="pull-right pad5" href="#"> 
    <img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/> 
</a>

합니다.

이러한 부유 이미지로 인해 페이지가 원래보다 길어지는 문제가 있습니다. 그러나 Scrollspy는 여전히 같은 위치에서 활성 링크를 전환하고 있습니다. 이로 인해 scrollspy는 현재보다 페이지 아래쪽에있는 콘텐츠에 대한 링크를 활성화합니다.

나는 ancors 링크의 ID 위치를 계산할 때 Scrollspy가 플로팅 이미지를 고려하도록하는 방법을 놓치고 있습니다. 이 문제를 어떻게 해결할 수 있는지 생각 해봐. 다음 페이지에서 문제의 영향을 확인할 수 있습니다 http://ethnoma.org/about.html

출처

2013-04-02 Guategeek

부트 스트랩에서 Scrollspy를 사용하려고 할 때 직접이 문제가 발생하여 스크립트에서 이미지를 계산하는 동안 이미지의 높이를 고려하지 않은 것처럼 보입니다. 스크롤 키가 정확 해집니다.

나는 이것이 이미지에 높이가 설정되어 있지 않아서라고 생각합니다. 페이지를 검사하여 페이지에 포함 된 부동 이미지의 높이가 으로 설정되어 있고 CSS에서 미디어 쿼리 후 특정 값으로 설정하면 내 Scrollspy가 완벽하게 작동한다는 것을 알았습니다 .

출처

2013-09-03 08:46:57

저는이 문제에 대해 직접 생각해 봤습니다. 그래서 나는 다른 사람들이이 구속에서 스스로를 발견 할 경우를 대비해 몇 가지 설명과 가능한 해결책을 제공 할 것이라고 생각했습니다.

먼저 scrollspy이 올바르게 작동하고 있습니다. 페이지의 다양한 요소의 오프셋을 계산할 때 이미지는 아직로드되지 않았으므로 유효 높이는 0입니다. 나중에 이미지가로드되면 브라우저는 기본 치수를 결정하고 페이지 레이아웃을 다시 계산 한 다음 이미지로 페이지를 다시 그립니다. 그러나 scrollspy은 페이지가 다시 그려 졌음을 완전히 인식하지 못하기 때문에 오래된 오프셋을 계속 사용합니다.

모든 이미지를로드 한 후 scrollspy을 새로 고침했다면 오프셋이 정확하다는 것을 알 수 있습니다. 그래서, 문제는 이것을하는 방법입니다.

하나의 해결 방법은 모든 이미지에 onLoad 이벤트 처리기를 연결 한 다음 처리기 내에서 scrollspy을 새로 고치는 것입니다. 단순화 된 접근 방식은 다음과 같습니다

<script type="text/javascript"> 
    function refreshScrollspy() { 
     $('[data-spy="scroll"]').each(function() { 
      $(this).scrollspy('refresh'); 
     }); 
    } 
    $(function() { 
     refreshScrollspy(); 
    }); 
</script> 

<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>

가 여기 working jsfiddle example입니다. 이미지로드 핸들러는 이미지가 실제로로드되기 전에 등록되어야합니다. 그렇지 않으면 해고 당하지 않을 것입니다. 그래서 여기에 인라인 이벤트 핸들러를 사용하고 있습니다. 보다 우아한 해결책이 독자에게 남겨집니다.

출처

2014-12-04 04:00:07

플로팅 이미지 엉망진창 부트 스트랩 Scrollspy

답변

관련 문제