单页网站粘性导航：更改内容元素的活动状态

Question

我有一个单页网站，左侧是固定（粘性）侧边栏导航菜单，内容是主div。主div分为5个部分，每个id中有许多元素。

我试图在导航菜单和主要内容div中的元素中实现一些相互依赖/动态的状态变化，但我很难得到等式的所有部分上班。请参阅下面的代码。

1. 选择菜单项时

a。）其州应改为“选定”;和

b）页面应平滑滚动到主div中相应的section id;和

c）主div中与所选菜单项对应的元素应将状态更改为“active”。

1. 当用户向上和向下滚动页面时：

a。）导航应根据视图中的当前部分（'selected'）自行更新;和

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>

Answer 1

好的，所以我想我会插话，也许会提供更好的设置。使用您的演示javascript我只能假设您将有一个页眉和页脚，并且您希望您的菜单附加然后在某一点停止但我不完全确定，因为在您的演示中不是这种情况你只需要一个正常的固定菜单。所以我添加了词缀样式，一旦你滚过标题，菜单就会修复，然后当它到达页脚时停止。然后，主内容和导航中项目的活动类将在滚动时更改。所以我建议使用jquery每个函数，然后将你的项包装在一个span中，并为该span提供一类feature-category和id。然后每次窗口滚动到此跨度时，您可以触发更改类的函数。唯一的问题是，如果2个部分占据同一条线，那么您将遇到问题所以我建议让您的功能框具有百分比宽度并将百分比设置为最小的盒子数量，这样如果每个部分最少有4个功能框section将宽度设置为25％。然后，您可以使用媒体查询在较小的屏幕上使它们变大。

这是一个工作小提琴演示Fiddle

所以你的html标记看起来与此类似：

  <div class='pub_site_nav'>
    <div class="container">
         Page navigation menu
    </div>
  </div> <!-- /.container .pub_site_nav -->

  <div class="features_page">

      <div class="story_section_container">
           <div class="container">
                Hero section
           </div>
      </div><!-- /.container .pub_site_nav -->


      <div class="main_contents">
           <div class="container">


                <div id="sidebar_wrapper">
                     <div class="sidebar_nav_container">
                          <div class="nav_menu_item selected"><a href="#A">Features A</a></div>
                          <div class="nav_menu_item"><a href="#B">Features B</a></div>
                          <div class="nav_menu_item"><a href="#C">Features C</a></div>
                          <div class="nav_menu_item"><a href="#D">Features D</a></div>
                          <div class="nav_menu_item"><a href="#E">Features E</a></div>
                     </div><!-- /.sidebar_nav_container-->
                </div><!-- /.#sidebar_wrapper-->

                <div class="feature_boxes_container">

                     <span class="feature_category active" id="A">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-4</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-5</div>
                          </div>
                    </span>

                    <span class="feature_category" id="B">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-4</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-5</div>
                          </div>
                    </span>

                    <span class="feature_category" id="C">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-4</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-5</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-6</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-7</div>
                          </div>
                    </span>

                    <span class="feature_category" id="D">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature D-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature D-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature D-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature D-4</div>
                          </div>
                    </span>

                    <span class="feature_category" id="E">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-4</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-5</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-6</div>
                          </div>
                    </span>


                </div><!-- /.feature_boxes_container-->

           </div><!-- /.container-->
      </div><!-- /.container .main_contents -->
      <div class="random_content" style="height:800px;background:#111;"></div>

      <div class="public_footer">
           <div class="container">
                Footer
           </div>
      </div> <!-- / .container .public_footer -->
  </div><!-- /.features_page -->

然后你的Jquery看起来像这样：

$(window).on("scroll", function(){
    $( ".feature_category" ).each(function() {
        var sectionID = $(this).attr("id");
        if ( $(window).scrollTop() >= $(this).offset().top - 220 ) {
           $('.nav_menu_item.selected').removeClass("selected");
           $('.nav_menu_item a[href=\'#'+sectionID+'\']').parent().addClass("selected");
           $('.feature_category').removeClass('active');
           $('#'+sectionID+'').addClass('active');
        }
    });
    /*Affix code*/
    var contentTop = $("#sidebar_wrapper").offset().top - 68;
    var footerTop = $(".random_content").offset().top - $('.sidebar_nav_container').outerHeight() - 65;
    if ( $(this).scrollTop() >= contentTop) {
        $( '.sidebar_nav_container' ).addClass("fixed");
    }else{
        $( '.sidebar_nav_container' ).removeClass("fixed");
    }
    if ( $(window).scrollTop() >= footerTop) {
       $( '.sidebar_nav_container' ).addClass("absolute_bottom");
    }else{
      $( '.sidebar_nav_container' ).removeClass("absolute_bottom");
    }
});
$( document ).on( "click", ".sidebar_nav_container a", function(e) {
  e.preventDefault();
  var sectionID = $(this).attr("href");
  $('html, body').animate({
        scrollTop: $(sectionID).offset().top - 200
    }, 800);
});

我在jquery代码中添加了一些注释，如果你不想使用它，你可以删除菜单词缀代码。然后你可以使用正常位置固定css到你的菜单。

最后这是您要使用的CSS：

body,html{
  padding: 0;
  margin: 0;
  max-width: 100%;
  background: #fff;
}
/*easier to have your container with margin and not padding that way your element is actually in that position and not padding to that position*/
.container {
  margin:0 80px;
  position:relative;
}
.pub_site_nav {
  position:fixed;
  width:100%;
  z-index:10;
  top:0;
  left: 0;
  height:68px;
  line-height:64px;
  background:yellow;
}
.features_page{
  margin-top:65px;
}
.features_page .story_section_container {
  background-color:#888;
  padding-bottom:100px;
  padding-top:72px;
  text-align:left
}
/*Better to have a fixed width for your sidebar that way everything will work properly when your sidebar goes fixed because you need to account for your .container margin once it is in fixed position you can do it with a percentage if you use css calc but it has less browser compatibility also your main_contents should not have a max-width because when the sidebar goes fixed it will be in the wrong position if the screen goes above the max-width of the container*/
#sidebar_wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom:0;
  width: 200px;
  background:orange;
}
.sidebar_nav_container {
  padding: 24px 0;
  width: 200px;
}
.sidebar_nav_container.fixed{
  position:fixed;
  top:68px;
  left:80px;
}
.sidebar_nav_container.absolute_bottom{
  position:absolute;
  top:auto;
  bottom: 0;
  left:0;
}
.sidebar_nav_item{
  width:100%;
  padding:0;
  margin:0;
}
.sidebar_nav_container .nav_menu_item a {
  text-align: left;
  padding:10px 10px 10px 24px;
  border-left: 1px solid #efefef;
  text-transform:uppercase;
  text-decoration: none;
  font-size:12px;
  font-weight:500;
  position:relative;
  display:block;
  /*so nav item doesn't jump on hover*/
  border:4px solid transparent;
}

.sidebar_nav_container .nav_menu_item a:hover {
  border-left:4px solid #d6ecfd;
}

.sidebar_nav_container .nav_menu_item.selected a {
  border-left:4px solid #1193f6;
}

.feature_boxes_container{
  background: #f2f2f2;
  padding:45px 0 80px 0;
  margin-left:200px;
  /*The Following 2 lines removes the whitespace from feature box wrapper so they will align with a width of 25%*/
  font-size:0;
  zoom: 1;
}
.feature_box_wrapper{
  width:25%;
  margin:0;
  padding:0;
  display:inline-block;
}
.feature_boxes_container .feature_box {
  text-align: center;
  background:#fff;
  margin:10px;
  padding: 24px;
  height:100px;
  /*so everything aligns properly and doesn't jump when activated*/
  border:2px solid transparent;
  font-size:12px;
}
.feature_boxes_container .feature_category.active .feature_box {
  border: 1px solid red
}
.features_page .public_footer {
  padding: 60px 0;
  background: green;
}
@media screen and (max-width: 1049px){
  .feature_box_wrapper{width: 50%; }
}
@media screen and (max-width: 767px){
  .container{margin:0 10px; }
  #sidebar_wrapper{width: 125px; }
  .sidebar_nav_container{width:125px; }
  .sidebar_nav_container.fixed{left:10px; }
  .sidebar_nav_container.absolute_bottom{left:0; }
  .feature_boxes_container{margin-left:125px; }
  .feature_box_wrapper{width: 100%; }
}

css可能有点乱，因为我把它简单地扔到了一起很快但我觉得你可以搞乱它并制作你自己的布局但这应该让你开始。

如果您有任何问题，请随时评论我，我希望这有助于：）

Answer 2

好的，所以这是最终使它工作的jQuery代码：

＆＃13;

＆＃13;

$(window).on("scroll", function(){
  $( ".feature_category" ).each(function() {
    var sectionID = $(this).attr("id");
    if ( $(window).scrollTop() >= $(this).offset().top -180) {
      $('.nav_menu_item a.selected').removeClass("selected");
      $('.nav_menu_item a[href=\'#'+sectionID+'\']').parent().addClass("selected");
      $('.main_contents .feature_boxes_container .feature_category').removeClass('active');
      $('#'+sectionID+'').addClass('active');
    }
  });
});

// Cache selectors
var topMenu = $(".sidebar_nav_container"),
    topMenuHeight = topMenu.outerHeight(),
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+36;
  $('html, body').stop().animate({
    scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
  // Get container scroll position
  var fromTop = $(this).scrollTop()+topMenuHeight;

  // Get id of current scroll item
  var cur = scrollItems.map(function(){
    if ($(this).offset().top < fromTop)
      return this;
  });
  // Get the id of the current element
  cur = cur[cur.length-1];
  var id = cur && cur.length ? cur[0].id : "";

  $(window).scroll(function(){
    menuItems
    .parent().removeClass("selected")
    .end().filter("[href=#"+id+"]").parent().addClass("selected");
  });
});


$(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 -90) {

      $('.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': '60px',
        'height': height
      });
    }
  });
});

＆＃13;

＆＃13;

＆＃13;

我设法根据其他stackoverflow答案拼凑这个，以及一些有用的指针。它可能是你见过的最糟糕的意大利面条代码，但它确实有效。

Answer 3

让我们检查你问题的某些部分。将更新完整答案

＆＃13;

＆＃13;

			$(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
			    }, 2000);
			
			  });
			});
			
			
			$('a').click(function(){
			  $('html, body').animate({
			    scrollTop: $( $(this).attr('href') ).offset().top -90
			  }, 800);
			});

＆＃13;

			.clearfix:after {
			   content: " "; /* Older browser do not support empty content */
			   visibility: hidden;
			   display: block;
			   height: 0;
			   clear: both;
			}
			.hidden {
				display:block;
				color: blue;
				}
			
			.container {
					margin:0 auto;
					padding-left:80px;
					padding-right:80px
					}
			
			.features_public_content_container {
				width:100%;
				height: 100% !important;
				position: relative;
				max-width:1200px;
				margin-left:auto;
				margin-right:auto;
				font-size:12px;
				padding:0 40px
				}
			
			
			#left_sidebar {
			    height: 100% !important;
			    width: 25% !important;
			    position: fixed;
				float: left
				}
			
			#right {
				height: auto;
				max-width:75% !important;
				top: 0;
				right: 0;
				float: right;
				position: relative;
				}
			
			
			.features_page {
			    margin-top:12px;
			    position: relative;
				}
			
			.features_page .sidebar_nav_container {
				margin: auto;
			    position: relative;
				float: left
				}
			
			.features_page .sidebar_nav_container .feature_tab {
				float:none;
				width:100%;
				color:#1193f6 !important;
				text-align: left;
				line-height:40px;
				height:40px;
				padding-left: 24px;
				font-size:12px;
				border-left:2px solid #efefef !important;
				text-transform:uppercase;
				font-weight:500;
				overflow:hidden;
				cursor:pointer;
				position:relative
				}
			
			.features_page .sidebar_nav_container .feature_tab .indicator {
				position:absolute;
				width:100%;
				height: 100%;
				display:none;
				bottom:0;
				left: 0
				}
			
			.features_page .sidebar_nav_container .feature_tab:hover .indicator {
				display:block;
				border-left:4px solid #d6ecfd
				}
			
			.features_page .sidebar_nav_container .feature_tab.selected .indicator {
				display:block;
				border-left:4px solid #1193f6;
				}
			
			
			.features_page .feature_boxes_container {
				padding-bottom:12px;
				padding-top:12px;
				text-align: center;
				background: #f2f2f2;
				}
			
			.features_page .feature_boxes_container .feature_box {
					background:#fff;
					display:inline-block;
					height:150px;
					width:60px;
					margin:12px;
					padding: 24px;
					text-align:center;
					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)
					}
			
			.features_page .feature_boxes_container .feature_box.active {
					border: 2px solid #1193f6;
					}
			
			.features_page .feature_boxes_container .feature_box.in-active .feature_overview_icon {
				color: #363636;
			}
			
			
			.nav_menu_item {
				margin: 8px 0;
			}
			.nav_menu_item a{padding: 5px;}
			.nav_menu_item .selected {
				background-color: black;
				border: 1px dotted red;
				color: white;
			}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


		<div class="layout_wrapper">

    <div class="features_page">

      <div class="container features_public_content_container clearfix">

        
        <div class="col span_2 clearfix" id="left_sidebar">

          <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>

＆＃13;

＆＃13;

＆＃13;