Question

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

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

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

@media (min-width: 768px)

谢谢。

Answer 1

你可以使用jquery来实现这个

if ($(window).width() < 768) {
   $('body').removeAttr('data-spy');
}
else {
   $('body').attr('data-spy','scroll');
}

Answer 2

您可以使用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。

如何在移动设备上禁用bootstrap数据间谍？（较小的分辨率）

2 个答案:

如何在移动设备上禁用bootstrap数据间谍？ （较小的分辨率）

2 个答案:

如何在移动设备上禁用bootstrap数据间谍？（较小的分辨率）