左侧浮动锚点定位页面/左侧滑动可定位网页

正文 4043字数 336,413阅读

jQuery左侧浮动锚点定位页面滚动效果。
jQuery左侧浮动锚点定位页面滚动效果
jquery左侧滑动可定位网页（支持上下滑动）
长网页的定位。

<script type="text/javascript" src="https://lizhenqiu.com/templates/default/jquery.min.js"></script><!--jq库-->

<style>
/*页面内容 测试*/
*{padding:0px;margin:0px;}
#xl_content{width: 100%;height: auto; margin: 0 auto;}
#xl_content div{width: 100%; height: 868px; margin: 0 auto;}
#xl_content div#item1{background-color: #00ff00}
#xl_content div#item2{background-color: #279756}
#xl_content div#item3{background-color: #2ce3e5}
#xl_content div#item4{background-color: #5e57e7}
#xl_content div#item5{background-color: #ca61ae}
#xl_content div h1{font-size: 36px; color: #fff;}
/*end*/

#xl_menu li a{width: 88px; height: 54px; line-height: 54px; text-align: center;background-color: #fff;color: #32c96a;display: block}
#xl_menu li a:hover,#xl_menu li a.cur{background-color: #32c92a;color: #fff;}


/*右侧导航*/
.xl_right_gun_go{
	width: 88px;
	height: auto; 
	position: fixed;
	top: 50%;
	right: 15px;
	margin-top: -135px;
	display: block;
	list-style: none;
}

/*顶部滚动导航*/
.xl_top_gun_go{
	position: fixed;
    left: 15px;
    top: 15px;
}
.xl_top_gun_go li{
	float:left;list-style: none;
}
</style>
<div id="xl_menu">
	<ul class="xl_right_gun_go"><!--右侧导航-->
		<li><a href="#item1" class="cur">One</a></li>
		<li><a href="#item2">Two</a></li>
		<li><a href="#item3">Three</a></li>
		<li><a href="#item4">Four</a></li>
		<li><a href="#item5">Fir</a></li>
	</ul>
	
	<ul class="xl_top_gun_go"><!--顶部滚动导航-->
		<li><a href="#item1" class="cur">One</a></li>
		<li><a href="#item2">Two</a></li>
		<li><a href="#item3">Three</a></li>
		<li><a href="#item4">Four</a></li>
		<li><a href="#item5">Fir</a></li>
	</ul>
</div>
	

<div id="xl_content">
	<div class="item" id="item1"> <!--楼层对应id item1-->
		<h1>1F</h1>
	</div>
	<div class="item" id="item2">
		<h1>2F</h1>        
	</div>
	<div class="item" id="item3">
		<h1>3F</h1>        
	</div>
	<div class="item" id="item4">
		<h1>4F</h1>        
	</div>
	<div class="item" id="item5">
		<h1>5F</h1>        
	</div>
</div>

<script>$(document).ready(function(){
    $(window).scroll(function(){
        var top = $(document).scrollTop();          //定义变量，获取滚动条的高度
        var menu = $("#xl_menu");                      //定义变量，抓取#xl_menu
        var items = $("#xl_content").find(".item");    //定义变量，查找.item

        var curId = "";                             //定义变量，当前所在的楼层item #id 

        items.each(function(){
            var m = $(this);                        //定义变量，获取当前类
            var itemsTop = m.offset().top;        //定义变量，获取当前类的top偏移量
            if(top > itemsTop-100){
                curId = "#" + m.attr("id");
            }else{
                return false;
            }
        });

        //给相应的楼层设置cur,取消其他楼层的cur
        var curLink = menu.find(".cur");
        if( curId && curLink.attr("href") != curId ){
            curLink.removeClass("cur");
            menu.find( "[href=" + curId + "]" ).addClass("cur"); //查找 a #item5
        }
        // console.log(top);
    });
});</script>

Run code

Cut to clipboard

运行查看效果点击 Run code ↑↑↑

lizhenqiu blog

左侧浮动锚点定位页面/左侧滑动可定位网页

相关日志

暂无评论 »

留下評論