11
Vice.com에서와 같은 기능을하는 사이드 바를 만들려고합니다. 아래로 스크롤하면 사이드 바가 특정 지점에서 고정되고 사이드 바가 사이트 하단 근처의 특정 지점에 도달하면 나머지 사이트와 계속해서 위로 스크롤됩니다.고정 된 사이드 바 스크롤을 페이지 하단에서 290 픽셀로 만드시겠습니까?
내 사이트에서 사이드 바가 아래쪽에 도달하면 계속해서 사이드 바를 가져 오는 두 번째 부분에 붙어 있습니다. 290px 정확한 것입니다. 여기
자바 스크립트
을<script>
jQuery(window).scroll(function() {
var threshold = 20;
if (jQuery(window).scrollTop() >= 20)
jQuery('#sidebar').addClass('fixed');
else
jQuery('#sidebar').removeClass('fixed');
});
</script>
CSS
#sidebar {
margin: 0;
position: absolute;
right: 0;
width: 220px;
}
#sidebar.fixed {
margin-left: 720px;
position:fixed;
right: auto;
top: 173px;
}
나는 하단에 특정 지점을 명중하면 고정 사이드 바는 스크롤 할 수있는 방법 ?
편집 # 여기에 1
아담에 의해 업데이트 된 코드입니다. 다른 임계 값이있는 페이지에 대해 조건문을 사용하고 있습니다. 이 코드를 사용할 때 아무 것도 일어나지 않습니다. 즉, 사이드 바에 fixed 클래스가 추가되지 않으므로 코드가없는 것처럼 정상적으로 스크롤됩니다. 또한,이 라인에 콘솔 오류가 나타납니다 if (scrollTop() >= 236) { "숫자는 함수가 아닙니다"라고 말합니다.
if (jQuery(document.body).hasClass("home")) {
jQuery(window).scroll(function() {
var sidebarHeight = jQuery('#sidebar').height(),
containerHeight = jQuery('#container').height() + 173,
scrollTop = jQuery(window).scrollTop(),
clientHeight = scrollTop + jQuery(window).height(),
threshold = 654;
if (scrollTop() >= 654) {
jQuery('#sidebar').addClass('fixed');
} else if (containerHeight - scrollTop <= sidebarHeight) {
jQuery('#sidebar').removeClass('fixed').addClass('bottom');
}
});
} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
jQuery(window).scroll(function() {
var sidebarHeight = jQuery('#sidebar').height(),
containerHeight = jQuery('#container').height() + 173,
scrollTop = jQuery(window).scrollTop(),
clientHeight = scrollTop + jQuery(window).height(),
threshold = 20;
if (scrollTop() >= 20) {
jQuery('#sidebar').addClass('fixed');
} else if (containerHeight - scrollTop <= sidebarHeight) {
jQuery('#sidebar').removeClass('fixed').addClass('bottom');
}
});
} else {
jQuery(window).scroll(function() {
var sidebarHeight = jQuery('#sidebar').height(),
containerHeight = jQuery('#container').height() + 173,
scrollTop = jQuery(window).scrollTop(),
clientHeight = scrollTop + jQuery(window).height(),
threshold = 236;
if (scrollTop() >= 236) {
jQuery('#sidebar').addClass('fixed');
} else if (containerHeight - scrollTop <= sidebarHeight) {
jQuery('#sidebar').removeClass('fixed').addClass('bottom');
}
});
}
다음은 요청에 따라 HTML 구조입니다 :
<!-- BEGIN #masthead-->
<div id="masthead">
<!-- #secondary-menu -->
<div id="secondary-menu">
<!-- .centered-menu -->
<div class="centered-menu">
<div class="latest-tweets"></div>
<div id="search-bar"></div>
<ul class="social-icons sf-js-enabled"></ul>
</div>
<!-- /.centered-menu -->
</div>
<!-- /#secondary-menu -->
<!-- BEGIN #header-->
<div id="header">
<!-- #header-inner -->
<div id="header-inner" class="clearfix">
<div id="logo"></div>
<!-- BEGIN #primary-menu -->
<div id="primary-menu" class="clearfix">
<!-- .left-menu -->
<div class="left-menu split-menu"></div>
<!-- /.left-menu -->
<!-- .right-menu -->
<div class="right-menu split-menu">
<div class="menu-menu-right-container"></div>
<!-- /.right-menu -->
<!-- END #primary-menu -->
</div>
</div>
<!-- /#header-inner -->
<!-- END #header -->
<!-- BEGIN #mobile-menu -->
<div id="mobile-menu">
<div id="mobile-inner"></div>
</div>
<!-- END #mobile-menu -->
</div>
<div id="categories-bar"></div>
</div>
<div id="masthead-space"></div>
<!-- END #masthead -->
<!-- BEGIN #wrapper-->
<div id="wrapper">
<!-- BEGIN #page-->
<div id="page">
<div id="main" class="clearfix">
<div id="container" class="clearfix">
<!--BEGIN #content -->
<div id="content">
<div id="sidebar"></div><!-- #sidebar -->
</div>
</div>
<!--END #main -->
</div>
<!--END #page -->
</div>
<!--END #wrapper -->
</div>
<!--BEGIN #bottom -->
<div id="bottom">
<!--BEGIN #footer -->
<div id="footer"></div>
</div>
나는 당신의 페이지의 구조에 긍정적 인 아니에요하지만 난 그것이 작동되도록하려고합니다. 당신이 나에게 바이올린을 만들 수 있다면 나는 더 정확하게 나를 할 수 있었다. –