스크롤 할 때 멋진 애니메이션으로 사라지는 탐색 모음을 만드는 방법

좋은 애니메이션으로 스크롤 할 때 사라지는 탐색 줄을 만들려고합니다. 여기 내가 지금까지 만든 것입니다.스크롤 할 때 멋진 애니메이션으로 사라지는 탐색 모음을 만드는 방법

HTML :

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="css/style.css" type="text/css"> 
     <link rel="icon" href="favicon.PNG" type="image/gif"> 
     <title>Top News</title> 
    </head> 
    <body> 
     <div class = "fixedbc"> 
      <div class="bwbutton">Welcome to Top News</div> 
      <header>asdasd</header> 
     </div> 
    </body> 
</html>

CSS :

/* =================== Needs =================== */ 
html, body { 
     width: 100%; 
     height: 100%; 
     background: white; 
     margin:0; 
     padding:0; 
     border:0px; 
    } 

/* =================== Buttons =================== */ 

.bwbutton { 
    background-color:transparent; 
    border:6px solid #ffffff; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:Georgia; 
    font-size:45px; 
    padding:13px 60px; 
    text-decoration:none; 
    position:absolute; 
    top:30%; 
    left:29%; 
    transition: all .1s ease-in; 
} 
.bwbutton:hover { 
    background-color:transparent; 
    border:6px solid black; 
    color:black; 
    transition: all 0.2s ease-in; 
} 
.bwbutton:active { 

} 

/* =================== LAYOUT =================== */ 

.fixedbc { 
    min-height:100%; 
    background-image: url("../bc.jpg"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
marquee{ 
    text-decoration: none; 
    margin-top:1.5%; 
    color:white; 
} 

/* =================== Header // Nav =================== */ 

header { 
    background: #f5b335; 
    height: 40px; 
    position: fixed; 
    top: 0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
} 
// we'll add this class using javascript 
.nav-up { 
    top: -40px; // same as header height. use variables in LESS/SASS 
}

자바 스크립트 : 당신은 어떤 스크롤에 탐색 모음을 숨기고 싶었다면

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; 
    } 
} 

function hasScrolled() { 
    var st = $(this).scrollTop(); 

    if(Math.abs(lastScrollTop - st) <= delta) 
     return; 
    if (st > lastScrollTop && st > navbarHeight){ 
     $('header').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     if(st + $(window).height() < $(document).height()) { 
      $('header').removeClass('nav-up').addClass('nav-down'); 
     } 
    } 

    lastScrollTop = st; 
}

출처

2016-07-12 Mister Babu

무엇을하고 있으며 무엇을 기대합니까? 문제를 이해하고 시도하기 위해 무엇을 했습니까? 콘솔에 오류가 있습니까? (Windows에서는 F12를 누르고, Mac에서는 Opt + Cmd + I) –

'setInterval'을 제대로 종료하지 않습니다. '}'로만 닫을 수 있습니다.}}'). 그것이 해결책인지 확실하지 않지만 어느쪽으로 든 고쳐야합니다. –

Check this fiddle here

그런 다음 위치를 고정시키고 스크롤 할 때 숨 깁니다.

처럼, 샘플 HTML (이 데모 jQuery를 추가해야)

<header>Header</header>

샘플 CSS

body { 
    margin: 0; 
    padding: 0; 
    height: 1000px 
} 

header { 
    position:fixed; 
    background: #111111; 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height:50px; 
    color:#FFFFFF; 
    -webkit-transition: all 0.35s; 
     -moz-transition: all 0.35s; 
      transition: all 0.35s; 
    overflow: hidden 
} 

header.hide { 
    margin-top: -50px; 
}

샘플 jQuery를

$(window).scroll(function() { 
    if ($("header").offset().top > 50) { 
     $("header").addClass("hide"); 
    } 
    else { 
     $("header").removeClass("hide"); 
    } 
});

출처

2016-07-12 16:34:56

스크롤 할 때 멋진 애니메이션으로 사라지는 탐색 모음을 만드는 방법

답변

관련 문제