使用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的侧滚动菜单

回答

相关问题