如何在移动设备上禁用bootstrap数据间谍? (较小的分辨率)

时间:2017-05-17 07:27:31

标签: javascript html css twitter-bootstrap scroll

我正在使用bootstrap默认数据间谍在滚动浏览页面时动态更改导航栏链接的外观,如下所示:

<body data-spy="scroll" data-target=".navbar" data-offset="50">

如何在移动视图中禁用它? 如果它是一个普通的CSS课程,我会做类似的事情:

@media (min-width: 768px)

谢谢。

2 个答案:

答案 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