【发布时间】：2016-02-17 01:25:50
【问题描述】：
我有一个单页网站，左侧有一个固定的（粘性）侧边栏导航菜单，还有一个包含内容的主 div。主 div 分为 5 个部分，每个 id 中有许多元素。
我正在尝试实现与导航菜单 和 主要内容 div 中的元素相关的几个相互依赖/动态的状态变化，但我正在努力获得方程式的所有部分去工作。请在下面查看我的代码。
- 选择菜单项时
a.) 其状态应更改为“已选择”；和
b) 页面应该平滑滚动到主 div 中的相应部分 id；和
c) 主 div 中与所选菜单项对应的元素应将状态更改为“活动”。
- 当用户上下滚动页面时：
a.) 导航应根据当前视图中的部分（“已选择”）自行更新；和
b.) 主要内容 div 中的元素在进入视口中心时应更改状态（“活动”）。
（我意识到第 1.c 点和第 2.b 点或多或少可以互换，但不确定最好遵循哪种逻辑。）
从上面的列表中，到目前为止，第 1 点似乎工作正常，但是当我尝试根据滚动位置更新导航时，我的代码开始崩溃。我以有限的 javascript 技能遇到了障碍，非常感谢您的建议。
$(function() {
$('.nav_menu_item a').click(function(evt) {
var selectedTab = $(this);
var featureGroup = selectedTab.parents('.sidebar_nav_container');
var allTabs = featureGroup.find('.nav_menu_item a');
var allContent = featureGroup.find('.feature_box');
// get the rel attribute to know what box we need to activate
var rel = $(this).parent().attr('rel');
// clear tab selections
allTabs.removeClass('selected');
selectedTab.addClass('selected');
// make all boxes "in-active"
$('.feature_box').each(function() {
$(this).removeClass('active');
$(this).removeClass('in-active');
});
//show what we need
$('.feature_category_'+rel).addClass('active');
// find correlated content
var idx = selectedTab.index();
var selectedContent = $(allContent);
selectedContent.removeClass('in-active');
$('html, body').animate({
scrollTop: $("#"+rel).offset().top -90
}, 800);
});
});
$(document).ready(function () {
var length = $('#sidebar_wrapper').height() - $('.sidebar_nav_container').height() + $('#sidebar_wrapper').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('.sidebar_nav_container').height() + 'px';
if (scroll < $('#sidebar_wrapper').offset().top) {
$('.sidebar_nav_container').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll > length) {
$('.sidebar_nav_container').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('.sidebar_nav_container').css({
'position': 'fixed',
'top': '45px',
'height': height
});
}
});
});
$(document).ready(function () {
(function highlightNav() {
var prev; //keep track of previous selected link
var isVisible= function(el){
el = $(el);
if(!el || el.length === 0){
return false
};
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = el.offset().top;
var elemBottom = elemTop + el.height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
$(window).scroll(function(){
$('.sidebar_nav_container > .nav_menu_item a').each(function(index, el){
el = $(el);
if(isVisible(el.attr('href'))){
if(prev){
prev.removeClass('selected');
}
el.addClass('selected');
prev = el;
//break early to keep highlight on the first/highest visible element
//remove this you want the link for the lowest/last visible element to be set instead
return false;
}
});
});
//trigger the scroll handler to highlight on page load
$(window).scroll();
})();
});.hidden {
display:block;
color: blue;
}
.features_page {
margin-top:12px;
position: relative;
}
.container {
margin:0 auto;
padding-left:12px;
padding-right:12px
}
.container .features_public_content_container {
height: 100% !important;
position: relative;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font-size:12px;
padding:auto;
}
.col {
display:block;
float:left;
width:100%;
}
.span_2 {
width: 20%;
}
.span_10 {
width: 80%;
}
#sidebar_wrapper {
height: 100% !important;
position: fixed;
float: left;
padding-top: 12px;
}
#right {
height: auto;
top: 0;
right: 0;
float: right;
position: relative;
}
.sidebar_nav_container {
margin:auto;
position: relative;
float: left
}
.sidebar_nav_container .nav_menu_item a {
float:left;
width:100%;
color:#1193f6 !important;
text-align: left;
line-height:40px;
height:40px;
padding-left: 24px;
border-left: 1px solid #efefef;
text-transform:uppercase;
font-size:12px;
font-weight:500;
overflow:hidden;
cursor:pointer;
position:relative
}
.sidebar_nav_container .nav_menu_item a .indicator {
position:relative;
width:100%;
height: 100%;
display:none;
bottom:0;
left: 0
}
.sidebar_nav_container .nav_menu_item a.indicator:hover {
display:block;
border-left:4px solid #d6ecfd;
}
.sidebar_nav_container .nav_menu_item a.selected {
display:block;
border-left:4px solid #1193f6;
}
.feature_boxes_container {
padding-bottom:12px;
padding-top:12px;
text-align: center !important;
background: #f2f2f2;
}
.feature_boxes_container .feature_box {
float: none;
text-align: center;
display: inline-block;
position: relative;
background:#fff;
height:60px;
width:60px;
margin:12px;
padding: 24px;
vertical-align:top;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
box-shadow:0 1px 3px rgba(0,0,0,0.12)
}
.feature_boxes_container .feature_box.active {
border: 2px solid #1193f6;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body id='public_layout' class='with_header'>
<div class="layout_wrapper">
<div class="features_page">
<div class="container features_public_content_container">
<div class="col span_2" id="sidebar_wrapper">
<div class="sidebar_nav_container">
<div class="nav_menu_item feature_category_A selected" rel="A">
<a href="#A" class="indicator">Features A</a>
</div>
<div class="nav_menu_item feature_category_B" rel="B">
<a href="#B" class="indicator">Features B</a>
</div>
<div class="nav_menu_item feature_category_C" rel="C">
<a href="#C" class="indicator">Features C</a>
</div>
<div class="nav_menu_item feature_category_D" rel="D">
<a href="#D" class="indicator">Features D</a>
</div>
<div class="nav_menu_item feature_category_E" rel="E">
<a href="#E" class="indicator">Features E</a>
</div>
</div> <!-- / .sidebar_nav_container -->
</div> <!-- / #left-sidebar -->
<div class="col span_10" id="right">
<div class="feature_boxes_container">
<!-- Features A -->
<div class="feature_box feature_category_A active" id="A">Feature A-1</div>
<div class="feature_box feature_category_A active">Feature A-2</div>
<div class="feature_box feature_category_A active">Feature A-3</div>
<div class="feature_box feature_category_A active">Feature A-4</div>
<div class="feature_box feature_category_A active">Feature A-5</div>
<!-- Features B -->
<div class="feature_box feature_category_B in-active" id="B">Feature B-1</div>
<div class="feature_box feature_category_B in-active">Feature B-2</div>
<div class="feature_box feature_category_B in-active">Feature B-3</div>
<div class="feature_box feature_category_B in-active">Feature B-4</div>
<div class="feature_box feature_category_B in-active">Feature B-5</div>
<!-- Features C -->
<div class="feature_box feature_category_C in-active" id="C">Feature C-1</div>
<div class="feature_box feature_category_C in-active">Feature C-2</div>
<div class="feature_box feature_category_C in-active">Feature C-3</div>
<div class="feature_box feature_category_C in-active">Feature C-4</div>
<div class="feature_box feature_category_C in-active">Feature C-5</div>
<!-- Features D -->
<div class="feature_box feature_category_D in-active" id="D">Feature D-1</div>
<div class="feature_box feature_category_D in-active">Feature D-2</div>
<div class="feature_box feature_category_D in-active">Feature D-3</div>
<div class="feature_box feature_category_D in-active">Feature D-4</div>
<div class="feature_box feature_category_D in-active">Feature D-5</div>
<!-- Features E -->
<div class="feature_box feature_category_E in-active" id="E">Feature E-1</div>
<div class="feature_box feature_category_E in-active">Feature E-2</div>
<div class="feature_box feature_category_E in-active">Feature E-3</div>
<div class="feature_box feature_category_E in-active">Feature E-4</div>
<div class="feature_box feature_category_E in-active">Feature E-5</div>
</div> <!-- /.feature_boxes_container -->
</div> <!-- / #right -->
</div> <!-- / .container .features_public_content_container -->
</div> <!-- / .features_page -->
</div> <!-- / .layout_wrapper -->
</body>
</html>【问题讨论】：
标签： javascript jquery html css