html中如何实现自定义菜单随着滚动条滑动效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
1、给一个div
<style>
#menu{
position: relative;top: 0px;
}
</style>
<div id="menu"> </div>
2、事件菜单,点击
<script>
function showHide(num){
if(num==1){
$('html, body').animate({scrollTop: $('#biaoji1').offset().top},"slow")//"slow"
}else if(num==2){
$('html, body').animate({scrollTop: $('#biaoji2').offset().top},"slow")
}else if(num==3){
$('html, body').animate({scrollTop: $('#biaoji3').offset().top},"slow")
}
}
</script>
3、滚动鼠标
<script>
$(function(){
window.onscroll=function(){
var top2=$(document).scrollTop();
//var top1=document.body.scrollTop;
console.log("top2:"+top2)
$("#menu").css("position","relative").css("top",top2);
}
});
</script>
感谢各位的阅读!看完上述内容,你们对html中如何实现自定义菜单随着滚动条滑动效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。