트위터의 부트 스트랩 2.1.0에서 새로운 접사 플러그인을 사용하는 방법은 무엇입니까?
그 주제에 관한 부트 스트랩 문서는 약간 혼란 스럽습니다. 접사 navbar가있는 문서와 비슷한 동작을 원합니다 .navbar가 단락 / 페이지 제목 아래에 있으며 아래로 스크롤하면 먼저 페이지 상단에 도달 할 때까지 스크롤 한 다음 추가 스크롤 다운을 위해 고정해야합니다 .
jsFiddle은 탐색 모음 개념과 함께 작동하지 않으므로 최소 예제로 사용하기 위해 별도의 페이지를 설정했습니다. http://i08fs1.ira.uka.de/~s_drr/navbar.html
내 탐색 모음으로 사용합니다.
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
나는 data-offset-top0 값을 원한다고 생각 합니다 (막대가 맨 위에 붙어 있어야하기 때문에). 그러나 50에서는 최소한의 효과가 있습니다.
자바 스크립트 코드도 넣으면 :
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
도움을 주셔서 감사합니다.
비슷한 문제가 발생하여 개선 된 솔루션을 찾았습니다.
data-offset-topHTML로 지정하지 않아도 됩니다. 대신 다음을 호출 할 때 지정하십시오 .affix().
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
여기서 장점은 data-offset-top속성 을 업데이트하지 않고도 사이트의 레이아웃을 변경할 수 있다는 것 입니다. 이것은 요소의 실제 계산 위치를 사용하기 때문에 요소를 약간 다른 위치에 렌더링하는 브라우저와의 불일치를 방지합니다.
CSS를 사용하여 요소를 맨 위에 고정해야합니다. 또한, 내가 설정 한 width: 100%이후 탐색 요소 .nav와 요소 position: fixed어떤 이유로 오작동 :
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
마지막으로, 부착 된 요소가 고정되면 해당 요소는 더 이상 페이지의 공간을 차지하지 않으므로 그 아래의 요소가 "점프"합니다. 이 추악함을 방지하기 위해 div런타임에 navbar와 동일하게 설정된 높이로 navbar를 래핑합니다 .
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
$('#nav-wrapper').height($("#nav").height());
여기에 jsFiddle이 작동하는 것을 확인해야합니다 .
처음으로 이것을 구현했으며 여기에 내가 찾은 것이 있습니다.
data-offset-top값은 걸릴 장소에 부착 효과를 위해 스크롤해야하는 픽셀의 양입니다. 귀하의 경우 한 번 50px스크롤하면 항목의 클래스가에서 (으)로 변경 .affix-top됩니다 .affix. 유스 케이스에서 data-offset-top대략 으로 설정하고 싶을 것입니다 130px.
이 클래스 변경이 발생하면 class의 위치를 스타일링하여 요소를 CSS에 배치해야합니다 .affix. 부트 스트랩 2.1 이미 정의 .affix로 position: fixed;당신이 당신의 자신의 위치 값을 추가하기 만하면 모든 그래서.
예:
.affix {
position: fixed;
top: 20px;
left: 0px;
}
이 문제를 해결하기 위해 객체가 부착되거나 연결 해제되었을 때 jQuery 이벤트를 발생 시키도록 affix 플러그인을 수정했습니다.
풀 요청은 다음과 같습니다. https://github.com/twitter/bootstrap/pull/4712
그리고 코드 : https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
그런 다음 탐색 바를 연결하려면 다음을 수행하십시오.
<script type="text/javascript">
$(function(){
$('#navbar').on('affixed', function () {
$('#navbar').addClass('navbar-fixed-top')
});
$('#navbar').on('unaffixed', function () {
$('#navbar').removeClass('navbar-fixed-top')
});
});
</script>
.affix()스크립트에서 제거해야합니다 .
부트 스트랩은 data-attributes대부분의 경우 JavaScript 를 통해 또는 직선 JavaScript 를 통해 작업을 수행하는 옵션을 제공합니다 .
twitterbootstrap의 소스 코드에서 이것을 얻었으며 꽤 잘 작동합니다.
HTML :
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul id="navbar" class="nav nav-list bs-docs-sidenav">
...
</ul>
</div>
</div>
CSS :
.bs-docs-sidenav {
max-height: 340px;
overflow-y: scroll;
}
.affix {
position: fixed;
top: 50px;
width: 240px;
}
JS :
$(document).ready(function(){
var $window = $(window);
setTimeout(function () {
$('.bs-docs-sidenav').affix({
offset: {
top: function (){
return $window.width() <= 980 ? 290 : 210
}
}
})
}, 100);
});
스크립트 만 제거하면됩니다. 내 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<style>
#content {
width: 800px;
height: 2000px;
background: #f5f5f5;
margin: 0 auto;
}
.menu {
background: #ccc;
width: 200px;
height: 400px;
float: left;
}
.affix {
position: fixed;
top: 20px;
left: auto;
right: auto;
}
</style>
</head>
<body>
<div id="content">
<div style="height: 200px"></div>
<div class="affix-top" data-spy="affix" data-offset-top="180">
<div class="menu">AFFIX BAR</div>
</div>
</div>
</body>
</html>
솔루션에 대한 namuol과 Dave Kiss에게 감사합니다. 제 경우에는 afflix와 collapse 플러그인을 함께 사용할 때 탐색 막대 높이와 너비에 작은 문제가있었습니다. 너비 문제는 부모 요소 (내 경우에는 컨테이너)에서 상속하여 쉽게 해결할 수 있습니다. 또한 약간의 자바 스크립트 (실제로 커피 스크립트)와 부드럽게 접을 수 있습니다. 트릭은 auto축소 토글이 발생하기 전에 래퍼 높이를 설정 하고 나중에 다시 고정하는 것입니다.
마크 업 (haml) :
#wrapper
#navbar.navbar
.navbar-inner
%a.btn.btn-navbar.btn-collapse
%span.icon-bar
%span.icon-bar
%span.icon-bar
#menu.nav-collapse
-# Menu goes here
CSS :
#wrapper {
width: inherit;
}
#navbar {
&.affix {
top: 0;
width: inherit;
}
}
커피 스크립트 :
class Navigation
@initialize: ->
@navbar = $('#navbar')
@menu = $('#menu')
@wrapper = $('#wrapper')
@navbar.affix({offset: @navbar.position()})
@adjustWrapperHeight(@navbar.height())
@navbar.find('a.btn-collapse').on 'click', () => @collapse()
@menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
@menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())
@collapse: ->
@adjustWrapperHeight("auto")
@menu.collapse('toggle')
@adjustWrapperHeight: (height) ->
@wrapper.css("height", height)
$ ->
Navigation.initialize()
탐색 모음을 연결하는 내 솔루션 :
function affixnolag(){
$navbar = $('#navbar');
if($navbar.length < 1)
return false;
h_obj = $navbar.height();
$navbar
.on('affixed', function(){
$navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
})
.on('unaffixed', function(){
if($('#nvfix_tmp').length > 0)
$('#nvfix_tmp').remove();
});
}
허용되는 답변과 유사하게 모든 것을 한 번에 수행하기 위해 다음과 같은 작업을 수행 할 수도 있습니다.
$('#nav').affix({
offset: { top: $('#nav').offset().top }
}).wrap(function() {
return $('<div></div>', {
height: $(this).outerHeight()
});
});
This not only invokes the affix plugin, but will also wrap the affixed element in a div which will maintian the original height of the navbar.
'IT박스' 카테고리의 다른 글
| lodash에 일치하는 항목을 대체하는 기능이 있습니까? (0) | 2020.07.30 |
|---|---|
| 위도 또는 경도를 미터로 변환하는 방법? (0) | 2020.07.30 |
| iframe에서 가로 스크롤 막대를 숨기시겠습니까? (0) | 2020.07.30 |
| 안드로이드 버튼 선택기 (0) | 2020.07.30 |
| 자바 스크립트로 텍스트 선택 지우기 (0) | 2020.07.30 |