Jquery和响应式
Jquery and responsive
我的网站上有一个偏移量为 -35px 的
scrollTo
锚链接脚本,因为我的导航栏高度为 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()
它可能与媒体查询不完全匹配,具体取决于是否为某些浏览器显示滚动条。
您可以读出不同的解决方案,但也许使用媒体/css查询会更简单。要在JS中获取屏幕分辨率,请使用屏幕对象:
screen.width;
screen.height;
所以你可以检查高度,然后做不同的事情。
您可以使用以下内容来测试窗口元素上的特定宽度。
if($(window).width() > x) {
// Do something.
} else {
// Do something else.
}
您可以在点击回调中使用它来检查窗口当时的状态。
在您的代码中,它可能是:
$(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)
var topOffset = 35;
if($(window).width() > 350)
{
topOffset = 20;
}
$('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(),它可能无法完全匹配媒体查询,具体取决于是否为某些浏览器显示滚动条。
相关文章:
- 仅在响应视图中激发jQuery函数
- jQuery/Ajax-试图通过Ajax创建POST方法并获得对HTML的响应
- jquery的响应是正确的,但拾取错误
- 带有关闭按钮的javascript/jquery响应工具提示
- 如何使用jQuery/Ajax响应特定的提交按钮
- jQuery post,访问responseType或回调中的响应
- 使滑块响应(jQuery)
- AJAX GET 请求内容不响应 jQuery
- 在 Web 应用程序加载时加载 JSON 响应(JQuery,Django)
- 插入的 HTML 未响应 jQuery
- 加载函数后DOM未响应jquery evers
- 获取HTML标记在XML json响应- jquery ajax
- JQuery:动态创建的html不响应JQuery函数
- 我的美元(窗口).滚动不响应(jQuery)
- 魔术行响应JQuery
- 元素不响应JQuery单击
- 响应jQuery画布,画布背景消失在窗口调整大小
- DOM元素未响应jquery
- Div没有响应jQuery函数
- HTML Required标签不响应Jquery