───────────────────────────────────
1.질문 분야 : (ex : XE) html/css
2.질문하기 전에 검색해본 내용 : 티스토리 상단바 효과, 티스토리 상단바 고정 ( ex : XE에서 ***를 검색했는데 관련 내용이 없고 찾을 수 없어ㅠㅠ)
3.질문 내용 : (질문내용을 자세하게 적어주세요. html/css/js 코딩 관련 질문은 소스 첨부 필수!)
스크롤 방향에 따라 상단바가 생겼다가 사라지는 코드를 적용했어ㅠ
(스크롤 내리면 상단바가 사라지고 스크롤 올리면 상단바가 생기는!)
완벽하게 적용이 됐는데 딱 하나 맘에 안드는게 슬라이드(상단바가 나타나고 없어지는게)가 너무 부드럽지가 않더라고ㅠㅠ
그냥 딱 내리면 딱 사라지고 올리면 딱 생기고 이래....
내가 원하는건 https://webdir.tist★ory.com/481 이분처럼 상단바가 부드럽게 내려가고 올라갔으면 하는데
잘 안되더라고 흑..
내가 추가한것
html
<script>// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}</script>
css
.header{
width:100%;
border-bottom:1px solid #efefef;
z-index:999;
transition:top .3s ease-in-out;
position:fixed;
background-color: rgba(255, 255, 255, 1);
}
.nav-up {top:-160px;}
내가 코딩을 배워본 적이 없어서ㅠㅠ 열심히 서핑하다가 transition 이 부분 시간을 늘리면 된다고 하길래
1s로 올렸는데 시간만 늘어나고 그대로더라..
혹시 필요하다면 내 티스토리 주소도 첨부할게ㅠㅠ
능력자 톨들아 도와조....
───────────────────────────────────
transition:top 대신 all 로 줘봐 ㅋㅋ