當用戶向上和向下滾動時，使一個小箭頭從左向右移動頁面

當用戶在頁面上下滾動時，我正在從左向右遞增地移動/滑動小箭頭形元素。當用戶向上和向下滾動時，使一個小箭頭從左向右移動頁面

例如，如果我向下滾動20像素的箭頭向右移動5px的〜40點的箭頭移動到左邊10px的

我的網站導航也將使用如果我滾動平滑滾動頁面跳轉，所以箭頭需要響應並將其自身定位到導航的菜單標題（例如每個導航鏈接的默認像素位置）。

任何人都可以爲此提供指導和最佳的編碼？

感謝

.arrow { 
enter code here width: 0; 
height: 0; 
border-left: 6px solid transparent; 
border-right: 6px solid transparent; 
border-bottom: 5px solid #7AC943; 
position:relative; 
margin-top: -5px; 
margin-left: 41px; 
position: fixed; 
} 

.arrow:after { 
content:''; 
position:absolute; 
top:2px; 
left:-5px; 
width: 0; 
height: 0; 
border-left: 5px solid transparent; 
border-right: 5px solid transparent; 
border-bottom: 4px solid black; 
}

來源

2013-08-07 MikeSeen

你嘗試過什麼嗎？ CSS代碼？ –

添加一些您code..to的開始..wat已經triedd ... –

我剛剛完成了設計，但我現在開始編寫它。我會盡我所能學到的知識，因爲我的經歷非常基礎，但我會在未來的日子裏給出一個答案並更新我的問題。 – MikeSeen

這基本上是所有的jQuery代碼，你需要

$(window).scroll(function(){ 
    $('.arrow').css('margin-left',$(this).scrollTop()/4 + 'px'); 
});

綁定到窗口滾動事件，改變箭頭的位置。因此

要使箭頭始終可見，您需要使用position:fixed;

來源

2013-08-07 17:42:37

這工作。但現在有幾件事是箭頭首先跳到左邊，然後按照預期向右進行。而且它向右過分，如果我增加像素值，它不夠遠。所以可以在你提供的jQuery語法中定義一個固定區域或最大距離或使其工作的其他方法？ – MikeSeen

當用戶向上和向下滾動時，使一個小箭頭從左向右移動頁面

回答

相關問題