我有一个单页网站，左边有一个固定的（粘性的）侧边栏导航菜单和一个包含内容的主div，主div被分成5个部分，每个id中有许多元素。
我试图实现一些与导航菜单和main contents div中的元素相关的相互依赖/动态的状态变化，但是我很难让等式的所有部分都工作。请看下面的代码。
1.* * 选择菜单项时**
a.）其状态应变为"选中";以及
b）页面应该平滑滚动到主div中的相应节ID;以及
c）对应于所选菜单项的主div中的元素应当将状态改变为"活动"。
1.* * 当用户上下滚动页面时：**
a.）导航应当基于视图中的当前部分（"选择的"）更新其自身;以及
b.）当主内容div中的元素进入视区中心时，它们应该改变状态（"活动"）。
（我意识到1.c和2.b或多或少是可以互换的，但不确定哪个逻辑是最好的。）
从上面的列表来看，第一点到目前为止似乎运行良好，但是当我试图根据滚动位置更新导航时，我的代码开始崩溃，我有限的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>
4条答案
按热度按时间agyaoht71#
好了，这就是最终使它工作的jQuery代码：
我根据其他stackoverflow的答案和这里的一些有用的指针拼凑了这个代码，这可能是你见过的最糟糕的意大利面代码，但是它能工作。
xmq68pz92#
好吧，我想我会加入进来，也许提供一个更好的设置。对于你的演示javascript，我只能假设你会有一个页眉和页脚，你希望你的菜单粘贴，然后停在某个点，但我不完全确定，因为在你的演示中，这不是事实，你只是有一个正常的固定菜单。所以我添加了一个附加样式，当你滚动到页眉的时候，菜单会固定下来，当它到达页脚的时候，菜单会停止，然后你的主内容中的活动类和导航会随着滚动而改变。所以我建议使用jquery的每个函数，然后把你的项目 Package 在一个span中，并给予这个span一个features的类category和一个id，然后每次窗口滚动到这个span的时候，你就可以触发一个改变类的函数。唯一的一点是，如果2节占用同一行，那么你会有问题，所以我建议使您的功能框有一个百分比宽度，并设置为最小数量的框，所以如果你有一个最小的4个功能框每节设置宽度为25%。然后，您可以使用媒体查询，使他们在较小的屏幕上更大。
这是一个工作的小提琴演示Fiddle
所以你的html标记看起来会像这样：
然后您的Jquery将类似于：
我在jquery代码中添加了一些注解，如果你不想使用菜单附加代码，可以将其删除，然后你就可以使用一个普通的位置固定的css到你的菜单中。
最后，这里是你会使用的css：
css可能有点乱，因为我只是把它扔在一起相当快，但我想你可以搞乱它，使自己的布局，但这应该让你开始。
如果你有任何问题，请随时评论我，我希望这有帮助：）
fnx2tebb3#
让我们检查您的问题的一部分。将更新完整的答案
b1uwtaje4#
向下滚动时跟随您的Angular 目录（显示滚动的活动状态）。
这是Githun link的Angular 。