내 레일 애플리케이션에서 사이드 바를 가지고있는 간단한 FAQ 페이지를 작성하려고합니다. 주제를 클릭하면 해당 질문으로 이동합니다. 나는 ID = "작업"과 일치하는 H2가HTML ID 링크를 부트 스트랩 navbar-header와 함께 사용하려면 어떻게해야합니까?
<li><a href="#work">How does it work?</a></li>
: 그리고 같은
그래서 사이드 바에서 내 코드의 조각이 보인다.
테스트 할 때 overshooting을 계속합니다. 부트 스트랩의 navbar에 의해 숨겨진 페이지 맨 처음부터 내용이 표시되기 때문에 생각됩니다. 이 문제를 해결하는 가장 좋은 방법은 무엇입니까?
같은 문제가있었습니다. 여기에 내가 무엇을 최대 온의 :
// listen for click events originating from elements with href starting with #
$('body').on('click.scroll-adjust', '[href^="#"]', function (e) {
var $nav
// make sure navigation hasn't already been prevented
if (e && e.isDefaultPrevented()) return
// get a reference to the offending navbar
$nav = $('div.navbar')
// check if the navbar is fixed
if ($nav.css('position') !== "fixed") return
// listen for when the browser performs the scroll
$(window).one('scroll', function() {
// scroll the window up by the height of the navbar
window.scrollBy(0, -$nav.height())
});
});
내가 CSS/HTML 마크 업으로 순전히이 고정 -이 또는 당신이 당신의 구조에 따라 작동하지 않을 수 있습니다. 내 페이지 섹션으로 나누어 그래서 페이지 구조는 각 DAV 클래스 container을 가지고 있습니다으로
첫째, 내 네비게이션 바에있는 참조하고 모든 요소는 사업부가 있습니다 :
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
<li><a href="#five">five</a></li>
</ul>
</div>
</div>
</div>
<div class="container" id="one">
<h1>One</h1>
</div>
...
<div class="container" id="five">
<h1>Five</h1>
</div>
설명서에 따르면 네비게이션을 보완하기 위해 몸체를 최소한 40px 쌓아 두는 것이 좋지만 페이지가 맨 위에있을 때만 내용을 아래로 밀어 넣을 것입니다. 내가 한 것처럼 정적 탐색 표시 줄에서 페이지 상단 # 앵커까지의 모든 링크가 페이지 위로 너무 높습니다.
내 솔루션 패드에 각각 고정 된 요소의 정상이었고, 그래서 나는 내 페이지의 CSS (표준 부트 스트랩과 반응하는 스타일 시트 사이의 부하)에 다음과 같은 CSS에 추가 : 이것은 분명히 사이에 공간을 추가
.container {
padding-top: 60px;
}
내 페이지의 각 섹션은 실제로 레이아웃에 유용합니다.
상단 섹션에도이 패딩이 있기 때문에 <body> 태그 상단에 패딩을 적용 할 필요가 없습니다.
사용자 지정 고정식 navbar가있는 경우 어떻게해야합니까? +1 – jamespick