0
달성하려는 것은 사용자가 페이지를 스크롤 할 때도 내 페이지 상단에있는 div입니다. 일반적인 작업처럼 보이고 웹상에서 많은 솔루션을 발견했습니다.
가장 쉬운 방법은 jQuery를 함께 할 것으로 보인다 :
$(window).scroll(function(){
$("#header").css({
"top": $(document).scrollTop() + "px"
});
});
그것은 파이어 폭스에서 잘 작동 ("헤더"내 DIV의 ID 인)! 그러나 Chrome (37.0.2062.103 m)에서는 마우스 휠을 사용하여 페이지를 위 또는 아래로 스크롤 할 때 의 머리글 div가 매우 이상하게 깜박입니다. (키보드, 스크롤 막대 또는 마우스 가운데 버튼을 누른 상태에서 스크롤하면 원활하게 작동합니다.) 페이지가 처음으로 스크롤 된 다음 div가 새 위치로 이동 된 것처럼 div의 위치를 변경하는 것이 다소 지연되는 것처럼 보입니다.
가내가 JSFiddle에서 너희들에게 이것을 보여 좋았을 것이지만,이 그것을 실행하면, 심지어 크롬에서 잘 작동 : http://jsfiddle.net/2tLgtn6c/3/embedded/result/이
당신은 여기에 이상한 행동을 볼 수 있습니다 - 사이트가 더 이상 존재하지 -
JSFiddle 예제와 완전히 같은 코드입니다. 나는 또한 그것을 아래에 게시하고있다.
어떤 아이디어라도 시도해 볼 수 있습니까? 외관상으로는, 실제로 JSFiddle 내에서 작동하므로 Chrome이 올바르게 표시 할 수 있습니다. 제안 사항에 크게 감사드립니다.
감사합니다, 리누스
index.htm으로 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js 다음 scroll 이벤트는 브라우저의 원인이됩니다 시간을 많이, 발사됩니다
function drawHorizontalHeader(width, height) {
var headerDiv = document.createElement("div");
$("body").append(headerDiv);
headerDiv.id = "header";
headerDiv.innerHTML = "Horizontal header.";
headerDiv.style.border = "1px solid blue";
headerDiv.style.position = "absolute";
$(headerDiv).width(width);
$(headerDiv).height(height);
}
function drawMain(width, height) {
var mainDiv = document.createElement("div");
$("body").append(mainDiv);
mainDiv.innerHTML = "Main.";
mainDiv.style.border = "1px solid red";
$(mainDiv).width(width);
$(mainDiv).height(height);
}
function drawPage() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$("body").css("margin", "0px");
drawHorizontalHeader(windowWidth, windowHeight/5);
drawMain(windowWidth, windowHeight * 2);
}
$(window).scroll(function(){
$("#header").css({
"top": $(document).scrollTop() + "px"
});
});
// Draw the page initially.
drawPage();
'position : fixed' 사용에 문제가 있습니까? –
무엇을 의미합니까? "position : fixed"를 사용하면 div는 페이지 상단에 머 무르지 않습니다. http://jsfiddle.net/2LzmcduL/1/embedded/result/ – Linus
Firefox에서 깜박 거리지 않는 것은 흥미 롭습니다. Chrome, IE 및 Opera에서 깜박입니다 (Safari는 제외). 창을 스크롤 한 후에 적용되는 CSS의 기능입니다. 'position : fixed'를 사용하면 윈도우 스크롤 이벤트를 제거하는 한 그것을 수정해야합니다. –