1
我有一个单页面网站，左侧有一个固定（粘滞）侧栏导航菜单，内容为主div。主要的div分为5个部分，每个ID中有许多元素。单页网站粘性导航：更改内容元素的活动状态
我试图实现一些相关的导航菜单和相关的主要内容div中的元素相互依存/动态状态更改，但我努力使等式的所有部分都能正常工作。请参阅下面的代码。
- 当一个菜单项被选择
一个）它的状态应该改变到“选择”。和
b）页面应平滑滚动到主div中相应的部分ID;和
c）与选定菜单项对应的主div中的元素应将状态更改为“激活”。
a）所述导航应根据针对当前部分进行自我更新（“选择” ）;和
b）主要内容div中的元素在进入视口中心时应改变状态（'active'）。
（我认识到，点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() {
\t \t (function highlightNav() {
\t \t var prev; //keep track of previous selected link
\t \t var isVisible= function(el){
\t \t el = $(el);
\t \t if(!el || el.length === 0){
\t \t return false
\t \t };
\t \t var docViewTop = $(window).scrollTop();
\t \t var docViewBottom = docViewTop + $(window).height();
\t \t var elemTop = el.offset().top;
\t \t var elemBottom = elemTop + el.height();
\t \t return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
\t \t }
\t \t $(window).scroll(function(){
\t \t $('.sidebar_nav_container > .nav_menu_item a').each(function(index, el){
\t \t el = $(el);
\t \t if(isVisible(el.attr('href'))){
\t \t if(prev){
\t \t prev.removeClass('selected');
\t \t }
\t \t el.addClass('selected');
\t \t prev = el;
\t \t //break early to keep highlight on the first/highest visible element
\t \t //remove this you want the link for the lowest/last visible element to be set instead
\t \t return false;
\t \t }
\t \t });
\t \t });
\t \t //trigger the scroll handler to highlight on page load
\t \t $(window).scroll();
\t \t })();
\t });.hidden {
\t display:block;
\t color: blue;
\t }
.features_page {
margin-top:12px;
position: relative;
}
.container {
\t \t margin:0 auto;
\t \t padding-left:12px;
\t \t padding-right:12px
\t \t }
.container .features_public_content_container {
\t height: 100% !important;
\t position: relative;
\t max-width:1200px;
\t margin-left:auto;
\t margin-right:auto;
\t font-size:12px;
\t padding:auto;
\t }
.col {
display:block;
float:left;
width:100%;
}
.span_2 {
width: 20%;
}
.span_10 {
width: 80%;
}
#sidebar_wrapper {
height: 100% !important;
position: fixed;
\t float: left;
\t padding-top: 12px;
\t }
#right {
height: auto;
top: 0;
right: 0;
float: right;
\t position: relative;
\t }
.sidebar_nav_container {
\t margin:auto;
\t \t position: relative;
\t \t float: left
\t \t }
.sidebar_nav_container .nav_menu_item a {
\t float:left;
\t width:100%;
\t color:#1193f6 !important;
\t text-align: left;
\t line-height:40px;
\t height:40px;
\t padding-left: 24px;
\t border-left: 1px solid #efefef;
\t text-transform:uppercase;
\t font-size:12px;
\t font-weight:500;
\t overflow:hidden;
\t cursor:pointer;
\t position:relative
\t }
.sidebar_nav_container .nav_menu_item a .indicator {
\t position:relative;
\t width:100%;
\t height: 100%;
\t display:none;
\t bottom:0;
\t left: 0
\t }
.sidebar_nav_container .nav_menu_item a.indicator:hover {
\t display:block;
\t border-left:4px solid #d6ecfd;
\t }
.sidebar_nav_container .nav_menu_item a.selected {
\t display:block;
\t border-left:4px solid #1193f6;
\t }
.feature_boxes_container {
\t padding-bottom:12px;
\t padding-top:12px;
\t text-align: center !important;
\t background: #f2f2f2;
\t }
.feature_boxes_container .feature_box {
\t \t \t float: none;
\t \t \t text-align: center;
\t \t \t display: inline-block;
\t \t \t position: relative;
\t \t background:#fff;
\t \t height:60px;
\t \t width:60px;
\t \t margin:12px;
\t \t padding: 24px;
\t \t vertical-align:top;
\t \t -webkit-border-radius:2px;
\t \t -moz-border-radius:2px;
\t \t -ms-border-radius:2px;
\t \t -o-border-radius:2px;
\t \t border-radius:2px;
\t \t -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
\t \t -moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
\t \t -ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
\t \t -o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
\t \t box-shadow:0 1px 3px rgba(0,0,0,0.12)
\t \t }
.feature_boxes_container .feature_box.active {
\t \t border: 2px solid #1193f6;
\t \t }<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">
\t <div class="feature_boxes_container">
\t <!-- Features A -->
\t
\t <div class="feature_box feature_category_A active" id="A">Feature A-1</div>
\t
\t <div class="feature_box feature_category_A active">Feature A-2</div>
\t
\t <div class="feature_box feature_category_A active">Feature A-3</div>
\t
\t <div class="feature_box feature_category_A active">Feature A-4</div>
\t
\t <div class="feature_box feature_category_A active">Feature A-5</div>
\t \t \t \t \t \t \t \t \t \t \t
\t <!-- Features B -->
\t
\t <div class="feature_box feature_category_B in-active" id="B">Feature B-1</div>
\t
\t <div class="feature_box feature_category_B in-active">Feature B-2</div>
\t
\t <div class="feature_box feature_category_B in-active">Feature B-3</div>
\t
\t <div class="feature_box feature_category_B in-active">Feature B-4</div>
\t
\t <div class="feature_box feature_category_B in-active">Feature B-5</div>
\t
\t <!-- Features C -->
\t
\t <div class="feature_box feature_category_C in-active" id="C">Feature C-1</div>
\t
\t <div class="feature_box feature_category_C in-active">Feature C-2</div>
\t
\t <div class="feature_box feature_category_C in-active">Feature C-3</div>
\t
\t <div class="feature_box feature_category_C in-active">Feature C-4</div>
\t
\t <div class="feature_box feature_category_C in-active">Feature C-5</div>
\t
\t <!-- Features D -->
\t
\t <div class="feature_box feature_category_D in-active" id="D">Feature D-1</div>
\t
\t <div class="feature_box feature_category_D in-active">Feature D-2</div>
\t
\t <div class="feature_box feature_category_D in-active">Feature D-3</div>
\t
\t <div class="feature_box feature_category_D in-active">Feature D-4</div>
\t
\t <div class="feature_box feature_category_D in-active">Feature D-5</div>
\t
\t \t \t \t <!-- Features E -->
\t <div class="feature_box feature_category_E in-active" id="E">Feature E-1</div>
\t
\t <div class="feature_box feature_category_E in-active">Feature E-2</div>
\t
\t <div class="feature_box feature_category_E in-active">Feature E-3</div>
\t
\t <div class="feature_box feature_category_E in-active">Feature E-4</div>
\t
\t <div class="feature_box feature_category_E in-active">Feature E-5</div>
</div> <!-- /.feature_boxes_container -->
</div> <!--/#right -->
\t </div> <!--/.container .features_public_content_container -->
\t </div> <!--/.features_page -->
</div> <!--/.layout_wrapper -->
</body>
</html>
嗨@PHPExpert！非常感谢您张贴并指引我朝着正确的方向发展。这绝对有帮助！ （我可以看到我在原来的CSS和jQuery中犯了一些基本的错误，所以非常感谢编辑。）我已经更新了原来的小提琴，所以方程的第一部分现在可以正常工作。我非常感谢你关于应用我在问题2）中概述的scrollSpy类型效果的想法。我试图为我的页面调整scrollSpy插件，但它不起作用。我应该发布我的“scrollSpy代码”吗？请指教。 –
最受欢迎32k_。如果你觉得答案是有用的，那么做upvote并接受它。关于scrollSpy插件，我不太熟悉它。但是添加它可以帮助解决问题。 – PHPExpert
我解决了问题的一部分，我解决了答案。我现在也更新了小提琴，以包括滚动效果的标记和jQuery。作为参考，请参阅：http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp此外，这篇文章在这里：https://stackoverflow.com/questions/17145609/complex-active-state-navigation-on-single我的代码目前不工作。我不知道我正在初始化Scrollspy ......并且也不确定这个HTML标记是否正确。如果您有任何建议，请告诉我。再次感谢！ –