스크롤이 아래로 내리면 텍스트 색상을 바뀌는 자바나 css 코드를 알수가 있을까요?> 인터넷에서 아무리 찾아봐도 나오지가 않아서요 ㅠㅠ
스쿨로 내리면 텍스,트가 안보여요
|
답변 5개 / 댓글 6개
채택된 답변
+20 포인트
레전드플랫폼
4년 전
4455님 제가 댓글에 적은 소스가 이 글에 있는 사이트에서 긁어온거예요.
두번째꺼 보면 메뉴 배경색 변경이라고 써져있네요.
Copy
<!-- 메뉴 배경색 변경 -->
$(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 지정하세요.
답변에 대한 댓글 2개
레전드플랫폼
4년 전
글자색 바꾸는 소스
답변에 대한 댓글 1개
돈도없어개발하기도시러
4년 전
글자가 흰색인데 배경이 흰색이라서 안보이는걸로 보이는데요?
배경을 흰색으로 바꾸셨는데... 글자를... 검은색으로 안바꾸신...
배경은 하셨으니, 글자도 금방하실거에요 화이팅!
답변에 대한 댓글 1개
멀티트리플
4년 전
레전트플랫폼님 답변 소스 잘 참고하시고요 더불어
위사진 두장 보면 로고가 흰색에서 검정으로 / 바탕색이 노란색에서 흰색으로 바뀌었네요
메뉴의 색상은 하얀색이구요.. 메뉴가 흰색이여서 안보일 확률이 있습니다.
검정색 로고의 파일명을 소스 상에서 찾아보셔야될거 같아요 그 위치가 메뉴도 포함되어있을꺼 같은데
그 위치에서 메뉴가 텍스트라면 css를 이미지라면 로고변화 소스를 참고해서 수정하시면 되겠네용
답변에 대한 댓글 2개
레전드플랫폼
4년 전
레전드플랫폼
4년 전
onscroll 이벤트 검색해 보세요.
스크롤하는것에 이벤트 걸어서 일정정도 스크롤되면 top부분 css 변경했을겁니다.
아래부분입니다.
Copy
<!-- 나타나는 메뉴 자바 -->
$(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');
}
});
답변을 작성하려면 로그인이 필요합니다.