Linus Tech의 팁 (https://linustechtips.com/main/)과 비슷한 navbar를 만들려고합니다. 나는 Javascript의 실제 기본 수준에 있으며 나는 pinnable navbar를 만들었지 만 내가 만들었을 때 그 위에 배너가 없었습니다. 이제 위에 배너가 있고 스크롤을 시작할 때 상단으로 이동하는 방법을 모르겠습니다.스크롤 할 때 navbar를 페이지 맨 위로 고정

<div class="navContainer"> 

    <div class="topBanner"> 

     <img src="images/topbanner.png" id="topBannerimg"/> 

    </div> 

    <div id="navbar"> 

     <button onclick="pinfunc()"><i id="pin" class="fa fa-thumb-tack fa-2x navButton" id="pinbtn" aria-hidden="true"></i></button> 

    </div> 

</div>

내 자바 스크립트입니다 : 여기 내 HTML입니다 난 그냥의 기본을 만들기 위해 찾고 있어요

body{ 
    margin: 0 auto; 
} 

.navContainer{ 
    width: 100%; 
    margin: 0 auto; 
} 

#topBannerimg{ 
    width: 100%; 
    margin: 0; 
    display:block 
} 

.navButton{ 
    height: 25px; 
    width: 25px; 
} 

.fa-thumb-tack{ 
    font-size: 50px; 
    color: red; 
    transform: rotate(270deg); 
} 

.container{ 
    height: 1000px; 
    width: 90%; 
    margin: 0 auto; 
} 

#navbar{ 
    height: 50px; 
    width: 100%; 
    position: fixed; 
    margin: 0 auto; 
    background-color: #D35300; 
} 

#nav{ 
    background-color: #D35300; 
    height: 50px; 
}

: 여기

var pinned = 1; 
    console.log(pinned); 
function pinfunc() { 


    if (pinned == 1) { 
     document.getElementById("navbar").style.position= "relative"; 
     document.getElementById("pin").style.color = "black"; 
     document.getElementById("pin").style.transform = "rotate(0deg)"; 
     pinned=0; 
    } 
    else if (pinned == 0) { 
     document.getElementById("navbar").style.position="fixed"; 
     document.getElementById("pin").style.color = "red"; 
     document.getElementById("pin").style.transform = "rotate(270deg)"; 
     pinned=1; 
    } 
}

그리고 나의 CSS입니다 LTT 포럼 - 토글 버튼이 사라지거나 그럴 필요가 없습니다. 이것은 첫 번째 게시물이므로 100 % 확신 할 수 없습니다. 미리 감사드립니다.

출처

2016-06-17 Duko

jQuery를 사용하거나 순수 JS 만 사용할 수 있습니까? – Ike10

jQuery를 모르지만 선생님이 나에게 그 중 일부를 설명하고있었습니다. 필요하다면 사용하지 않을 것입니다. – Duko

쉬운 해결책은 내 대답을 참조하십시오. 내 대답이 혼란 스러울 경우 도움을 청하십시오! :) – Ike10

외부 JS 또는 CSS 라이브러리를 사용하도록 허용 된 경우 부트 스트랩에 대한 Affix 플러그인을 사용해보십시오. (링크 : http://www.w3schools.com/bootstrap/bootstrap_affix.asp). 그것은 당신이 성취하고자하는 것을 단순하게 만듭니다.

외부 라이브러리를 사용할 수 없으면 다음을 읽어보십시오 : http://getbootstrap.com/javascript/#affix-examples 그리고 직접 구현하십시오.

행운을 빌어 요!

HTML의 하단에있는 JS 파일을로드하는이 HTML에서 배울 수

<html> 
    <head> 
    <link rel="stylesheet" href="path/to/font-awesome.css/file" type="text/css"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <!-- Custom CSS File Below --> 
    <link href="/path/to/custom/css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
    <div class="topBanner"> 
     <img src="images/topbanner.png" id="topBannerimg"/> 
    </div> 
    <div id="navbar" data-spy="affix" data-offset-top="100"> 
     <button onclick="pinfunc()"><i id="pin" class="fa fa-thumb-tack fa-2x navButton" aria-hidden="true"></i></button> 
    </div> 

    <div id="SpaceFiller"></div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="path/to/custom/js/file"></script> 
    </body> 
</html>

중요한 것들 :

그래서 나는 다음과 같은 HTML, JS 및 CSS 파일 작업을 얻었다 페이지가 먼저로드 될 수 있도록 body 태그와 CSS 및 JS 파일이로드되는 순서. 스크롤을 사용하려면 SpacFiller div가 있어야합니다. 또한 Navbar-container가 필요하지 않게 제거되었습니다. 자바 스크립트가

var pinned = true; 

function pinfunc() { 
    var $pin = $("#pin"); 
    var $navbar = $("#navbar"); 
    if (pinned) { 
     $pin.css({ 
     'color': 'black', 
     'transform': 'rotate(0deg)' 
     }); 
     console.log("not pinned") 
     $(window).off('.affix'); 
     $navbar.removeClass('affix affix-top affix-bottom'); 
     $navbar.removeData("bs.affix"); 
     pinned = false; 
    } else { 
     $pin.css({ 
     'color': 'red', 
     'transform': 'rotate(270deg)' 
     }); 
     $(window).on('.affix'); 
     $navbar.addClass('affix'); 
     $navbar.affix({ 
     offset: 100 
     }); 
     pinned= true; 
    } 
}

이 JS

은 자신의 ID를 통해 HTML 요소에 액세스하려면 (실제로 내가 믿는 sizzle.js를 사용하는) jQuery를 선택기를 사용합니다. 반환 된 jQuery 객체를 사용하여 함수는 적절한 CSS를 설정 한 다음 여기에서 읽을 수있는 함수를 사용하여 접미사를 전환합니다. http://getbootstrap.com/javascript/#affix, https://api.jquery.com/removeclass/, https://api.jquery.com/jQuery.removeData/, http://api.jquery.com/off/ 또한 `pinned` 값으로 0과 1을 사용하고 있지만 표시된대로 부울 값 (true와 false)을 사용하는 것이 좋습니다.

body{ 
    margin: 0 auto; 
} 

.affix { 
    top: 0; 
    width: 100%; 
} 

.affix + .container-fluid { 
    padding-top: 70px; 
} 

#topBannerimg{ 
    width: 100%; 
    margin: 0; 
    display:block; 
    height: 100px; 
    top: 0px; 
} 

.navButton{ 
    height: 25px; 
    width: 25px; 
} 

.fa-thumb-tack{ 
    font-size: 50px; 
    color: red; 
    transform: rotate(270deg); 
} 

#navbar{ 
    height: 50px; 
    width: 100%; 
    margin: 0 auto; 
    background-color: #D35300; 
} 

#SpaceFiller { 
    height: 10000px; 
    background-color: darkgreen; 
}

CSS는 내가 CSS는 설명이 필요하다고 생각하지만 불분명 경우 가서 설명을 부탁드립니다. 희망이 도움이! : D

편집 : 당신은 또한 `i` 태그 자체에 `onclick` 속성을 넣어 당신이 흰색 버튼 배경을 제거하려는 경우 `button` 래퍼를 제거 얻을 수 있습니다.

출처

2016-06-17 01:50:44 Ike10

고마워요. 문제는 핀 고정/고정 해제 (페이지가로드 될 때 이미 고정되어야 함)로 전환 할 수 있기를 원합니다. 부트 스트랩 어 픽스 (Bootstrap Affix)로 어떻게 할 것인가? 부트 스트랩 코드 (로컬 부트 스트랩 CDN 다운로드)를 수정 한 것 같습니다. – Duko

/path/to/custom/파일에 표시된 것처럼 사용자 정의 파일이 필요할지라도 부트 스트랩을 다시 실행할 필요가 없습니다. 내 편집을 참조하십시오. @Duko를 요청한 것 같습니다. – Ike10

스크롤 할 때 navbar를 페이지 맨 위로 고정

답변

HTML의 하단에있는 JS 파일을로드하는이 HTML에서 배울 수

관련 문제