使用CSS和jQuery的側滾動菜單

我想創建一個側滾動菜單，如here。我有什麼：使用CSS和jQuery的側滾動菜單

HTML：

<div class="scroll"> 
<p class="scroll_item" id="1">&nbsp;</p> 
<p class="scroll_item" id="2">&nbsp;</p> 
<p class="scroll_item" id="3">&nbsp;</p> 
<p class="scroll_item" id="4">&nbsp;</p> 
</div> 

<div id="first"> 1 </div> 
<div id="second"> 2 </div> 
<div id="third"> 3 </div> 
<div id="fourth"> 4 </div>

CSS：

.scroll{ 
     position:fixed; 
     height:48%; 
     right:4px; 
     top:48% 
    } 


    .scroll_item{ 
     margin-bottom:10px; 
     width:10px; 
     height:10px; 
     border: 3px solid #FFF; 
    } 
    .scroll_item_active{ 
     width:10px; 
     height:10px; 
     border:3px solid #FFF; 
     background-color: #FFF; 
     margin-bottom: 10px; 
    }

如何這應該工作：當你點擊<p> id爲3，將滾動到與DIV ID「第三」，並且該盒子將具有scroll_item_active類。另一方面，如果你使用瀏覽器的滾動條，框的類將會改變。

我需要你的幫助來編寫jQuery腳本。我所做的：

$('#1').onclick(function(.scrollTo('#first');) 
$('#2').onclick(function(.scrollTo('#second');) 
$('#3').onclick(function(.scrollTo('#third');) 
$('#4').onclick(function(.scrollTo('#fourth');)

來源

2013-08-05 Sergiu

你的代碼有什麼錯誤？ – Michael

您在'.scrollTo（'＃fourth'）;'之前缺少選擇器。像'$（'body，html'）。scrollTo（）'或'$（document）' – Spokey

此功能導航到部分垂直方向的偏移和平滑度，一時間元素

function scrollTo(selector, time, verticalOffset) { 
    time = typeof(time) != 'undefined' ? time : 1000; 
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; 
    element = $(selector); 
    offset = element.offset(); 
    offsetTop = offset.top + verticalOffset; 
    $('html, body').animate({ 
     scrollTop: offsetTop 
    }, time); 
}

以此爲點擊功能

$('#1').click(function() { 
    scrollToElement('#content'); 
});

要切換課程，請使用.addClass（here）

此處是一個例子，我敢肯定你可以根據你的需求來改變它：

$("p").addClass("myClass yourClass"); 
$("p").removeClass("myClass noClass")

來源

2013-08-05 12:09:16 Wayneio

謝謝！我如何在我的帖子中解釋的條件下切換課程？ – Sergiu

看到我更新的帖子 – Wayneio

http://jsfiddle.net/jP3yw/ - 我已經在JsFiddle上發佈了我的腳本，現在不工作。你能看一下嗎？ – Sergiu

使用CSS和jQuery的側滾動菜單

回答

相關問題