我有一个单页网站,左边有一个固定的(粘性的)侧边栏导航菜单和一个包含内容的主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 。