가르쳐 주세요 ㅠㅠ
본문
스크롤이 아래로 내리면 텍스트 색상을 바뀌는 자바나 css 코드를 알수가 있을까요?> 인터넷에서 아무리 찾아봐도 나오지가 않아서요 ㅠㅠ
스쿨로 내리면 텍스,트가 안보여요
답변 5
4455님 제가 댓글에 적은 소스가 이 글에 있는 사이트에서 긁어온거예요.
두번째꺼 보면 메뉴 배경색 변경이라고 써져있네요.
<!-- 메뉴 배경색 변경 -->
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 3) {
$(".ws").css("background" , "#ffffff");
}
else{
$(".ws").css("background" , "#00ff0000");
}
})
})
이 부분요
텍스트 색깔은 css에 글자색 다른 class 두개 만들어 두시고 위 소스에 글자부분에 스크롤 따라서 해당 class 지정하세요.
javascrpt로는 obj.css("color", "#FFFFFF"); 이런식일거예요
이제 이해가 되었습니다 ㅋㅋㅋ 정말 감사합니다 새해복많이 받으세요
onscroll 이벤트 검색해 보세요.
스크롤하는것에 이벤트 걸어서 일정정도 스크롤되면 top부분 css 변경했을겁니다.
아래부분입니다.
<!-- 나타나는 메뉴 자바 -->
$(document).ready(function(){
var headHeight = $("ws").outerHeight() + $("ws").outerHeight();
function floatGnb(){
if($(window).scrollTop() > headHeight){
$("ws").addClass("ws");
}else{
$("ws").removeClass("ws");
}
}
$(window).scroll(function(){
floatGnb();
});
floatGnb();
});
<!-- 메뉴 배경색 변경 -->
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 3) {
$(".ws").css("background" , "#ffffff");
}
else{
$(".ws").css("background" , "#00ff0000");
}
})
})
<!-- 로고 바뀌는 자바-->
$(window).scroll(function() {
if ($(".logo").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$('.nav-logo img').attr('src','http://jhil.ipdisk.co.kr:8000/jhil/img/logoq.png');
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$('.nav-logo img').attr('src','http://jhil.ipdisk.co.kr:8000/jhil/img/logo1.png');
}
});
레전트플랫폼님 답변 소스 잘 참고하시고요 더불어
위사진 두장 보면 로고가 흰색에서 검정으로 / 바탕색이 노란색에서 흰색으로 바뀌었네요
메뉴의 색상은 하얀색이구요.. 메뉴가 흰색이여서 안보일 확률이 있습니다.
검정색 로고의 파일명을 소스 상에서 찾아보셔야될거 같아요 그 위치가 메뉴도 포함되어있을꺼 같은데
그 위치에서 메뉴가 텍스트라면 css를 이미지라면 로고변화 소스를 참고해서 수정하시면 되겠네용
제가 올린게 저분이 보고있는 사이트의 소스예요.
http://jhil.ipdisk.co.kr:8000/jhil/
요기요
스크롤 내리면 글자 색이 변하는 그런 자바나 CSS 없는가요?
글자가 흰색인데 배경이 흰색이라서 안보이는걸로 보이는데요?
배경을 흰색으로 바꾸셨는데... 글자를... 검은색으로 안바꾸신...
배경은 하셨으니, 글자도 금방하실거에요 화이팅!
정말 감사합니다 새해복많이 받으세요 제가 초보라서요^^
정말 감사합니다 새해복많이 받으세요
