当前位置: 首页 > 工具软件 > Scrollspy > 使用案例 >

boostrap中scrollspy结合affix、以及affix的滚动与定位

庄星汉
2023-12-01

affix结合scrollspy的干货:http://9iphp.com/web/javascript/understanding-bootstraps-affix-scrollspy-plugins.html 介个我真理解了好久,希望以后不要再那么效率低下惹。

关于被affix的对象(一般就是被加了data-spy="affix"叫ul的家伙)位置,可以分为滚动开始时的位置,滚动时的位置,滚动结束时的位置,对应的css类为affix-top, affix, affix-bottom, 就是说,在初始时,ul会被加上affix-top这个类,滚动时被切换到affix类,然后以affix-bottom类结束,这三个类是很关键的,毕竟决定了被滚对象的位置。
因为是固定在一边,看别人滚的,所以默认的滚动时的affix类是加了position:fixed属性的。 我们想设置他们的样式,给affix设置top or left,就决定了滚动时affix对于浏览器窗口的位置,至于affix-top,和affix-bottom例子:

$('#sub-nav').affix({
     offset: {
       top: $('#sub-nav').offset().top - 71,
       bottom: ($('footer').outerHeight(true) ) + 40 
     }
})

设置了affix-top(初始滚动位置)为当前位置(因为要设置滚动到一定位置时,固定,所以减去了一定高度),这再配合.affix就实现了滚动到一定程度后,固定的效果! affix-bottom的位置为footer元素包括margin边距的高(.outerHieght(true)要加true。。) 加上下面为之设置的边距,这样就设置好了三个对应的位置。

boostrap中affix的一个bug:宽度的改变!
如果不设置width的时候, 发现往下一滚,我曹,变瘦了。
稍微来分析一下,因为ul的父元素我加了col-md col-sm 等类,所以栅格响应式的,不同的窗口大小,父元素的宽度也不同,那我们直接让ul的宽度在affix的三个状态中都等于父元素的宽度不就好了?!听起来不错!行动试试!$('#nav-menu').width($('#aside').width());这句就能实现,但是记得要外面加一个$(window).resize()事件,这样才能在窗口大小变化时,重新设置一下ul的宽度,最后再记得运行一下$(window).resize;下面是代码:

// affixWidth();
$(window).resize(function () {
     $('#sub-nav').width($('#aside-bar').width());
 });
 $(window).resize();

介个代码是我从git里找到的哈哈哈哈嘻嘻嘻嘻嘻………。

然后记得scrollspy一下介个ul:data-spy="affix"<body>元素加一下data-spy="scroll" data-target="#aside"这两个属性,表示body滚动的时候监听ul的父元素。下次好好说一下scrollspy吧诶。

 类似资料: