显示以下活动导航项目下方的箭头

我目前正在构建一个投资组合网站，以展示我在大学期间完成的一些工作，并在单页设计中落脚。我想让网站做的事情是，当您向下滚动并“进入”各个部分时，导航栏下方的向下箭头将水平滑过（作为动画）到当前活动部分/导航项目的下方。显示以下活动导航项目下方的箭头

我试过了什么？我会说实话，什么都没有。我不是在寻找答案，虽然那会很好，我只需要一个出发点。主要问题是我真的不知道如何将它“捕捉”到每个列表项目下面，以便它完全处于文本的中心位置，并且能够满足不同的显示分辨率。

HTML

<div id="header"> 
     <div class="topbar"> 
     </div> 
     <div class="headbar"> 
      <nav> 
       <div class="wrapper"> 
        <ul> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#work">Projects</a></li> 
         <li><a href="#contact">Contact</a></li> 
         <li><a href="#">Blog</a></li> 
        </ul> 
       </div> 
      </nav> 
     </div> 
     <div class="shadow"> 
     </div> 
     <div class="current"></div> 
    </div>

CSS

.wrapper { 
width: 920px; 
margin: 0 auto; 
} 

#header { 
position: fixed; 
width: 100%; 
} 

#header .topbar { 
height: 10px; 
background-color: #386c93; 
} 

#header .headbar { 
height: 60px; 
background: #f2f2f2; 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2JlYmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 
background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%, #cbebff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2), color-stop(100%,#cbebff)); 
background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%,#cbebff 100%); 
background: -o-linear-gradient(top, #ffffff 0%,#f2f2f2 100%,#cbebff 100%); 
background: -ms-linear-gradient(top, #ffffff 0%,#f2f2f2 100%,#cbebff 100%); 
background: linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%,#cbebff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbebff',GradientType=0); 
border-bottom: 1px solid #9b9999; 
} 

#header .shadow { 
height: 17px; 
background-image: url('shadow.png'); 
background-repeat: none; 
background-position: center; 
} 

#header a { 
color: #5c5959; 
text-decoration: none; 
} 

#header a:hover { 
color: #0092ff; 
} 

#header .current { 
background-image: url('nav-pointer.PNG'); 
height: 19px; 
width: 22px; 
margin-top: -18px; 
margin-left: 715px; 
} 

#header ul{ 
padding-top: 20px; 
text-align: center; 
list-style: none; 
} 

#header li { 
font-size: 16px; 
//float: left; 
display: inline; 
color: #5c5959; 
padding: 30px; 
}

我创建了一个的jsfiddle只是为了让生活更容易为大家 - http://jsfiddle.net/GW6CG/2/ - 道歉，如果该CSS是一种有点凌乱，我打算在某个时候清理它。

另外，您可以查看站点住在这里：http://www.jonline.me.uk/dev/

您的时间非常感谢！

来源

2013-09-25 J Young

从零开始创建此功能毫无意义。很多插件已经被创建来实现这一点。一个是scrollit.js。

另外，如果你想添加放屁的声音为您滚动，检查出fartscroll.js

希望我帮助。

来源

2013-09-25 16:45:11 banzomaikaka

谢谢。问题不在于页面滚动部分，我知道，问题在于如何将向下指向的箭头捕捉到当前活动的导航链接 - 这里有一个类似于我在此之后的示例：http ：//www.cyberpowersystem.co。uk/system/FANGBOOK_Evo_HX7-100在画廊部分。 –

这应该很容易。你稍等一会儿。 – banzomaikaka

是啊，很好地阅读了你所提供的内容我想你只是将一个背景图片加入到活动类中 - activeClass：'active'？ –

我写的东西前一阵子，你可以很容易地为这个骨架使用：http://jsfiddle.net/LYqVk/2/

jQuery的是这样的：

$('a[href*=#]').click(function (e) { 
    e.preventDefault(); 

    var id = $(this).attr('href'); 
    var scrollTo = $(id).offset().top; 

    $('html,body').animate({ 
     'scrollTop': scrollTo 
    }, 500); 
}); 

$(document).scroll(function() { 
    highlightSection(); 
}); 

function highlightSection() { 
    // Where's the scroll at? 
    var currentPosition = $(this).scrollTop(); 

    // Remove highlights from all 
    $('a[href*=#]').removeClass('highlighted'); 

    // Loop over each section 
    $('#content .section').each(function() { 
     // Calculate the start and end position of the section 
     var sectionStart = $(this).offset().top; 
     var sectionEnd = sectionStart + $(this).height(); 

     // If the current scroll lies between the start and the end of this section 
     if (currentPosition >= sectionStart && currentPosition < sectionEnd) { 
      // Highlight the corresponding anchors 
      $('a[href=#' + $(this).attr('id') + ']').addClass('highlighted'); 
     } 
    }); 
}; 

highlightSection();

已经在评论中很好看的代码，希望他们是足够的解释，但只是在他们不是基本过程是这样的：

工作了我们在哪里在页面上 - .scrollTop()
环比.sections
如果当前位置位于一个部分的顶部和底部之间，这就是我们要突出*
- 的一个，这将是用箭头。

来源

2013-09-25 16:45:11 gvee

非常感谢，我将通读它！ –

显示以下活动导航项目下方的箭头

回答

相关问题