Jquery笔记--滚动条移动，导航条显示隐藏和响应式。

来源：互联网发布：交换机性能测试软件编辑：程序博客网时间：2024/05/01 03:01

相信有很多人在写前端特效的时候时候会遇到滚动条监测导航的问题，也就是当页面被拉动到某个位置的时候导航条显示出现。到顶部的时候导航条又是另一种效果方式呈现，那时候我研究了这个问题大概花了几天的时间，后来把他实现出来了。然后为了简洁操作我把它封装成了Jquery的第三方扩展包。并添加上了类似于现在的响应式，因为是使用JS侦测的。相比于css3的media属性来说，兼容性相对较好。这里面解决问题的主要函数大概是 Jquery中的几个方法。第一个是侦测滚动条 scroll(), 侦测当前页面的宽度 resize()。然后就是Jquery的第三方封包了。

(function($){$.fn.scroll_head=function(options){var scrol={Class_name:"",pixel:700,media:false,media_size:0}var ops=$.extend(scrol,options);if(scrol.media==true){if($(window).scrollTop()>scrol.pixel){    $(scrol.Class_name).css({"display":"block"})}$(window).resize(function(){if($(window).width()<scrol.media_size){ $(scrol.Class_name).css({"display":"none"});}else{if($(window).scrollTop()>scrol.pixel){    $(scrol.Class_name).fadeIn(300);}else{    $(scrol.Class_name).fadeOut(100);} }})$(window).scroll(function(){if($(window).width()<scrol.media_size){ $(scrol.Class_name).css({"display":"none"});}else{if($(window).scrollTop()>scrol.pixel){    $(scrol.Class_name).fadeIn(300);}else{    $(scrol.Class_name).fadeOut(100);} }})}else{if($(window).scrollTop()>scrol.pixel){    $(scrol.Class_name).css({"display":"block"})}$(window).scroll(function(){if($(window).scrollTop()>scrol.pixel){   $(scrol.Class_name).fadeIn(300);}else{    $(scrol.Class_name).fadeOut(100);}});}}})(jQuery);

    $(window).scroll_head({Class_name:".head", //被隐藏的导航条pixel:800,  //当移动到某个像素时导航条显示media:true,//开启响应式media_size:768//响应式隐藏宽度})

自己编写完成两个导航栏后使用这段JQ扩展，将图2先隐藏然后在某个位置的时候显示。。。这样会使得页面交互性变得更好。

0 0