我在一个网站的一个导航栏中使用affix组件,并希望在较小的屏幕上禁用它。我使用的jquery方法与数据,不能弄清楚如果我的屏幕分辨率小于767px时关闭它。我试图捕获窗口宽度调整大小和滚动,并返回false或删除affix类,但它不真的很好。
if($('#subnav').length){ $(window).resize(function() { var wWidth = $(window).width(); getSize(wWidth); }); $(window).scroll(function () { var wWidth = $(window).width(); getSize(wWidth); }); function getSize(z){ if(z <= 767) { // I tried doing return false here,no good. $('#subnav').removeClass('affix').removeClass('affix-top'); $('.nav > li').removeClass('active'); } else { setNav(); } } var wWidth = $(window).width(); getSize(wWidth); function setNav (){ $('#subnav').affix({ offset: { top: 420,bottom: 270 } }); $('#subnav').scrollspy(); } }
解决方法
你可以像在Bootstrap页面上做的一样,只使用CSS。使用
@media queries检测屏幕大小,如果屏幕低于一定大小,不要将位置设置为固定。例如:
@media (min-width: 768px) { .affix { position: fixed; } }
此规则只有在屏幕宽度大于768像素时才会有效。
也可以反过来,如果屏幕小于一定大小,将元素的位置显式设置为静态:
@media (max-width: 767px) { .affix { position: static; } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。