鼠标滚动事件，侧边导航js效果

</pre><pre name="code" class="javascript">/* ====================== 侧边滑动小导航交互 ====================== */
var sidenav = $(".sidenav");
var sidenavbtn = $(".sidenavbtn");
sidenavbtn.mouseenter(function(){
var me = $(this);
var _s = me.find("s");
var _active = me.attr("data");
_s.addClass("hover");
me.addClass( _active );
});
sidenavbtn.mouseleave(function(){
var me = $(this);
var _s = me.find("s");
var _active = me.attr("data");
var current = "current"; //标记当前按钮是否在当前页面范围内高亮
if( !me.hasClass( current ) ){
_s.removeClass("hover");
me.removeClass( _active );
}
});
// 侧边小导航的滑入滑出：
function sideNavMove(y, obj){
if( y > obj["showSidebar"] ){
sidenav.slideDown(300);
if( y > obj["sidenav_market_active"] && y <= obj["sidenav_bestsell_active"] ){
highLightSidebarNav("sidenav_market");
}else if( y > obj["sidenav_bestsell_active"] && y <= obj["sidenav_history_active"] ){
highLightSidebarNav("sidenav_bestsell");
}else if( y > obj["sidenav_history_active"] && y <= obj["sidenav_tools_active"] ){
highLightSidebarNav("sidenav_history");
}else if( y > obj["sidenav_tools_active"] && y <= obj["sidenav_graph_active"] ){
highLightSidebarNav("sidenav_tools");
}else if( y > obj["sidenav_graph_active"] && y <= obj["sidenav_phone_active"] ){
highLightSidebarNav("sidenav_graph");
}else if( y > obj["sidenav_phone_active"] && y <= obj["noCurrentSidebar"] ){
highLightSidebarNav("sidenav_contact");
}else{
highLightSidebarNav();
}
}else{
sidenav.slideUp(300);
}
};
// 这个对象标识页面滚到不同的高度处，侧边小导航的对应按钮执行高亮显示：
var topToWhichSidebar = {
"showSidebar": 400, //小导航出现
"sidenav_market_active": 600, //寄售卖场
"sidenav_bestsell_active": 1400, //精品推荐
"sidenav_history_active": 1700, //历史成交
"sidenav_tools_active": 2000, //工具书刊
"sidenav_graph_active": 2300, //及时动态
"sidenav_phone_active": 2600, //联系电话
"noCurrentSidebar": 3000 // 最后一个按钮不再高亮
};
// 高亮显示某个小导航的通用方法：
function highLightSidebarNav( cls ){ // cls是对应小导航的class名
for( var i = 0; i < sidenavbtn.length; i++ ){
var _item = $(sidenavbtn[i]);
var act_cls = _item.attr("data");
_item.removeClass( act_cls ).removeClass( "current" );
_item.find("s").removeClass("hover");
}
if( cls ){ //传参时，才有高亮；不传参，则所有按钮都不高亮。
$("." + cls).addClass( cls + "_active").addClass("current").find("s").addClass("hover");
}
};

// 监听滚轮事件
$(window).scroll(function(){
var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight; //获取网页的总高度，documentElement for IE
var clientHeight = document.body.clientHeight || document.documentElement.clientHeight; //网页在浏览器中的可视高度
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //浏览器滚动条的top位置
sideNavMove( scrollTop, topToWhichSidebar );
});