置顶菜单栏和滚屏效果的实现

最新推荐文章于 2023-08-25 17:34:57 发布

原创最新推荐文章于 2023-08-25 17:34:57 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

本文介绍了如何实现网页置顶菜单和滚屏效果。置顶菜单通过设置div样式position:relative和z-index:99999实现。全屏滚屏效果则可以利用fullPage.js库，针对最后一个div不足一屏的情况，通过js控制，当滚动到第三屏时切换为手动滚动。此外，还介绍了html自带的scrollTo()方法来控制页面滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、首先是置顶菜单，在需要置顶的div上添加属性

position:relative; z-index:99999;

参考：http://blog.sina.com.cn/s/blog_67373f630100vsl3.html

二、滚屏效果的实现

1、全屏滚屏效果：引入fullPage.js

演示：http://www.dowebok.com/191.html

学习：http://www.dowebok.com/77.html

关于最后的div不足一屏如何展示，可以使用js进行控制，参考问题：https://segmentfault.com/q/1010000004242389?sort=created#answers-title

解决方式：

首先在js中设置scrollBar:true属性，然后添加js方法

说明：判断index--3，如果滚动到第三屏（最后一屏）即将滚动方式设置为手动，即手动滚动到底部

<script>
$(function(){
	$('#dowebok').fullpage({
		//sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
		scrollBar:true,
		scrollingSpeed:400,
		css3:true,
		menu: '#menu',
		verticalCentered: !1,
		afterLoad: function(anchorLink, index){
			if(index == 3){
				$.fn.fullpage.setAutoScrolling(false);
			}else{
				$.fn.fullpage.setAutoScrolling(true);
			}
		},
	});
});
</script>

2、平滑滚动到页面指定位置：引入scrollTo.js

演示：http://www.helloweba.com/view-blog-118.html

3、html自带scrollTo()方法

详解：http://www.w3school.com.cn/jsref/met_win_scrollto.asp

js方法如下：

<script type="text/javascript">
 	var js=0;//储存每次相加数值
	var hight=0;//储存高度 
	var scrollFunc=function(e){ 
    ee=e || window.event; 
	
    if(e.wheelDelta){//IE/Opera/Chrome 
		js++;
		if(e.wheelDelta>0){
			if(js%2==0){
				if(hight==1000){
					window.scrollTo(0,400);
					hight=400;
					next();
				}
				if(hight==400){
					window.scrollTo(0,0);
					hight=0;
					next();
				}
			}
		}else{
			if(js%2==0){
				if(hight==400){
					window.scrollTo(0,1000);
					hight=1000;
					next();
				}
				if(hight==0){
					window.scrollTo(0,400);
					hight=400;
					next();
				}
			} 
		}
    }else if(e.detail){//Firefox 
        t2.value=e.detail; 
    } 
} 
/*注册事件*/ 
if(document.addEventListener){ 
    document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 
</script>

说明：设置三个位置，分别是（0，0），（400，0），（1000，0），鼠标滑动则页面不断在这三个位置变换（敏感度很高）

js%2是用来解决一次触发事件执行两次代码的问题（原因未知），详见：http://tieba.baidu.com/p/3548388992