첨부 된 상단 nav-bar scrollspy 문제, 페이지 내용 오버레이

처음에는 상단에 고정되어 있지 않은 탐색 막대가 있습니다. 여기에서 수행하려고하는 것은 150 픽셀의 오프셋을 허용하면 navbar는 고정 된 위치로 상단에 부착되고 페이지의 다른 섹션에 링크하기 위해 인 페이지 앵커를 사용하고 페이지 고정 영역 (scrollspy?)에서 올바른 고정 접미사 nav-bar가 강조 표시됩니다첨부 된 상단 nav-bar scrollspy 문제, 페이지 내용 오버레이

내 문제는 네비게이션 바가 상단에 고정 된 후 일부 콘텐츠가 네비게이션 막대 뒤에 숨겨져 있기 때문에 고정 된 네비게이션 막대가 앵커가 페이지의 올바른 위치로 향하는 것을 차단합니다.

필자는이 문제에 대해 조사하고 바디에 패딩 윗부분을 추가하는 것에 대한 많은 제안을 보았습니다.하지만 스크롤을 붙이기 전까지는 상단 이동이 고정되어 있지 않습니다. 네비게이션 아직도 내가 아래 부분 How do I set the offset for ScrollSpy in Bootstrap?

나는 그래서 난 그냥 여기에 몇 가지 스크린 샷을 게시 할 예정입니다 설명에 나쁜 오전 솔루션을 시도 제대로 몸

에 패딩을 추가 한 후 강조하지 않습니다. 여기

는 스크롤하기 전에 스크린 샷 및 탐색 바는 상단에 고정 도착 후 여기에 enter image description here

이 스크린 샷입니다 부착하고, 나는 페이지 콘텐츠를 내가 원하는 방법 The Issue after the affixed fixed top nav

로 이동 작동하려면 enter image description here

아래 코드는 제 코드입니다.

<body data-spy="scroll"> 
    <!--This is the nav bar getting affixed to the top--> 
    <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav nav-justified"> 
     <li><a href="#section1">About</a></li> 
     <li><a href="#section2">Method</a></li> 
     <li><a href="#section3">Findings</a></li> 
     <li><a href="#section4">Final</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div><!--/.navbar -->

이

은

.navbar-custom { 
    border:none; 
    background-color: #FFFFFF; 
    font-weight:600; 
    text-transform:uppercase; 
    border-width:0; 
} 
.navbar-custom li{ 
    float:none; 
} 
.navbar-custom .navbar-nav>li>a { 
    color: #ddd; 
} 
.navbar-custom .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom  .navbar-nav .active a { 
    background-color:#902c00; 
    color:#FFFFFF !important; 
} 
#nav { 
    width: 100%; 
    position:static; 
    top:-32px; 
} 
#nav.affix { 
    position: fixed; 
    top: 0; 
    z-index:10; 
    width:940px; 
}

2 장, 섹션 3과은 Section

내 CSS 단지 콘텐츠를 감싸 컨텐츠 영역

<div class="mainContent"> 
    <div class="row"> 
    <div class="col-lg-7 col-md-7"> 
     <div id="section1"> 
     <h3>About the Project</h3> 
     </div> 
     <h4>Read the <a href="./assets/Preliminary_Avvo.pdf">Preliminary Proposal</a></h4> 
    </div>

와 HTML의 나머지 부분입니다 효과가 작동

var navOffset = parseInt($('body').css('padding-top')); 
$('body').scrollspy({ target: '#affix-nav', offset: navOffset+10 }); 
$('.navbar a').click(function (event) { 
    var scrollPos = jQuery('body').find($(this).attr('href')).offset().top - navOffset; 
    $('body,html').animate({ scrollTop: scrollPos}, 500, function() {}); 
    return false; 
});

코드 comes from this page : 여기

출처

2014-05-21 Samuel Shen

난 당신이 여기에 몇 가지 답을 찾을 수 있다고 생각 : http://stackoverflow.com/questions/18799688/bootstrap-affix- navbar-for-single-page-with-scrollspy-and-page-anchors/18834770 –

71,253,210는 당신이 가지고있는 효과를 방지하기위한 코드이다.

출처

2014-06-02 19:38:39

나는 디자인을 바꾸어 버렸지 만 답변을 주셔서 감사합니다 !! 나는 그것을 시도 할 것이다! –

해결되었습니다. 심지어 빠른 더러운 수정하지만, 작품,하지만

window.addEventListener("hashchange", function() { scrollBy(0, -50) })

이 사람에 대한 신용 : https://github.com/henrik

출처

2014-10-07 12:21:17 sanskarvihin

첨부 된 상단 nav-bar scrollspy 문제, 페이지 내용 오버레이

답변

관련 문제