顯示以下活動導航項目下方的箭頭

我目前正在構建一個投資組合網站，以展示我在大學期間完成的一些工作，並在單頁設計中落腳。我想讓網站做的事情是，當您向下滾動並「進入」各個部分時，導航欄下方的向下箭頭將水平滑過（作爲動畫）到當前活動部分/導航項目的下方。顯示以下活動導航項目下方的箭頭

我試過了什麼？我會說實話，什麼都沒有。我不是在尋找答案，雖然那會很好，我只需要一個出發點。主要問題是我真的不知道如何將它「捕捉」到每個列表項目下面，以便它完全處於文本的中心位置，並且能夠滿足不同的顯示分辨率。

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

非常感謝，我將通讀它！ –

顯示以下活動導航項目下方的箭頭

回答

相關問題