我的网站上有一个 scrollTo
anchor 链接脚本,偏移量为 -35px,因为我的导航栏高度为 35px。有时,在不同的分辨率(智能手机或平板电脑)上,我需要更改偏移值。我怎样才能在这个脚本中做到这一点?
$(document).ready(function() {
$('.scrollTo').click( function() { // Au clic sur un élément
var page = $(this).attr('href') ; // Page cible
var speed = 300; // Durée de l'animation (en ms)
$('html, body').animate( { scrollTop: $(page).offset().top - 35 }, speed ); // Go
return false;
});
});
最佳答案
最简单的通用解决方案是将偏移量基于导航栏的高度:
$('.scrollTo').click( function() { // Au clic sur un élément
var page = $(this).attr('href') ; // Page cible
var speed = 300; // Durée de l'animation (en ms)
var height = $(...nav bar selector...).height();
$('html, body').animate( { scrollTop: $(page).offset().top - height }, speed ); // Go
// ^^^^^^
return false;
});
但是如果你需要根据媒体查询调整你的JS,你应该使用matchMedia
:
if (matchMedia('(min-width: 768px)').matches) {
...larger screens...
} else {
...smaller screens...
}
这样做的优点是它可以完全匹配 CSS 中使用的媒体查询。如果您调用 $(window).width()
它可能与媒体查询不完全匹配,具体取决于某些浏览器是否显示滚动条。
关于javascript - Jquery 和响应式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35845374/