2014-04-11 5 views
0

HTML은 ----이 파이어 폭스에서 구글 크롬에서 잘 작동하지만 CSS는헤더 상수는

header1.clone { 
position: fixed; 
top: -120px; 
transition: 0.1s top ease-in; 
} 

body.down header1.clone { 
top: 0; 
left: 0; 
right: 0; 
z-index: 999; 
} 

JS

<script> 
$(document).ready(function() { 
var $header1 = $("header1"), 
$clone = $header1.before($header1.clone().addClass("clone")); 

$(window).on("scroll", function() { 
var fromTop = $("body").scrollTop(); 
$('body').toggleClass("down", (fromTop > 200)); 
}); 
}); 
</script> 

<header1> 
    .............. 
</header1> 

에서 내 콘텐츠를 포함. ..이 문제에 나를 도와주세요 .....

+0

을 상세 –

+0

헤더 정보에 문제를 설명하고 메뉴의 상단에 내 페이지 .... 내 메뉴 표시 줄이 아래로 스크롤해야하고 맨 위로 돌아갈 때 맨 위에 있어야합니다. .... 나는 메뉴와 디스플레이를 복제하기 위해 위의 내용을 사용했지만 호환되지 않아야합니다. ~에 ll – anya

답변

0

y처럼 보입니다. 항상 표시되는 헤더가 필요하므로 CSS를 사용하지 않는 이유는 무엇입니까?

header {position:fixed;} 
+0

만약 내가 그 의미처럼 사용하면 몇 가지 문제가 내 요구 사항에 따라 발생 .... .... 예 : 콘텐츠에 투명도가 포함되어 있습니다 ... 그 내용 아래에 스크롤 메뉴 이동 ... – anya

+0

오, 그래, 그게 참으로 문제가 될 것입니다. 또는 상단 헤더에 대해 반투명 투명한 창이 제공되는 디자인 업데이트로 이어질 수 있습니다. 이제 이것이 내가 쟁점으로 삼아야 할 문제라면, 그렇게 할 것이지만, 나는 이것을 고려할 시간이 없습니다. 아직, 나는 적어도 시도 않았다 :) – DoctorLouie

1

당신 같은이 사용하는 CSS 구현할 수 있습니다

fixedCSS 
{ 
position: fixed; 
top:0; left:0; 
width: 100%; 
} 

과 같은 jQuery를 사용하여이 클래스에 적용

<script> 
$(document).ready(function() { 
var $header1 = $("header1"), 
$clone = $header1.before($header1.clone().addClass("clone")); 

$(window).on("scroll", function() { 
    if ($(window).scrollTop() > 200) { 
     $('.header1').addClass('fixedCSS'); 
    } 
    else { 
     $('.header1').removeClass('fixedCSS'); 
    } 

}); 
}); 
</script> 
+0

나는 하나와 함께 약간의 CSS를 사용했다. plz chk ..... – anya