我正在使用bootstrap默认数据间谍在滚动浏览页面时动态更改导航栏链接的外观,如下所示:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
如何在移动视图中禁用它? 如果它是一个普通的CSS课程,我会做类似的事情:
@media (min-width: 768px)
谢谢。
答案 0 :(得分:2)
你可以使用jquery来实现这个
if ($(window).width() < 768) {
$('body').removeAttr('data-spy');
}
else {
$('body').attr('data-spy','scroll');
}
答案 1 :(得分:1)
您可以使用javascript初始化。
$('body').scrollspy({ target: '.spy-active', offset: 50 });
完整代码:
// Create function which check window size and adds or removes spy class
function toggleSpyClass () {
var windowWidth = $(window).width();
if (windowWidth > 768) {
$('.navbar').addClass('spy-active');
} else {
$('.navbar').removeClass('spy-active');
}
}
// Run this function to detect width on first document load
toggleSpyClass();
// Initialize scrollspy
$('body').scrollspy({ target: '.spy-active', offset: 50 });
// Add event listener on window resize event and rerun function
// to check whether it should be the spy class on navbar or not.
$(window).on('resize', toggleSpyClass);
更多信息here。