滚动到平板电脑和手机的位置条件
Scroll to position conditional for tablet and mobile
我有以下第一部分工作完美,它滚动到顶部(允许固定导航)并在距页面顶部 155 像素处停止。然而,当我们使用平板电脑时,header 深度下降到 75px,然后在移动设备上下降到 65px。
有没有办法根据导航栏的 css 高度有条件地滚动到不同的位置?注释掉的部分是我一直在玩的。
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: (target.offset().top)-155
}, 1000);
}
// else if ( $(".dl-menuwrapper button").css("height") === "65px") {
// $('html, body').animate({
// scrollTop: (target.offset().top)-75
// }, 1000);
// }
});
任何人有任何想法,以便我可以为平板电脑和移动设备增加两个高度?
我会将导航栏的高度作为变量获取,这样使用什么设备都没有关系。
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') ),
navBarHeight = $(".nav").height();
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: (target.offset().top) - navBarHeight
}, 1000);
}
});
显然,更改 $(".nav")
以根据您的目的使用正确的选择器。您还可以通过向 navBarHeight
.
添加常量来添加偏移量
我有以下第一部分工作完美,它滚动到顶部(允许固定导航)并在距页面顶部 155 像素处停止。然而,当我们使用平板电脑时,header 深度下降到 75px,然后在移动设备上下降到 65px。
有没有办法根据导航栏的 css 高度有条件地滚动到不同的位置?注释掉的部分是我一直在玩的。
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: (target.offset().top)-155
}, 1000);
}
// else if ( $(".dl-menuwrapper button").css("height") === "65px") {
// $('html, body').animate({
// scrollTop: (target.offset().top)-75
// }, 1000);
// }
});
任何人有任何想法,以便我可以为平板电脑和移动设备增加两个高度?
我会将导航栏的高度作为变量获取,这样使用什么设备都没有关系。
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') ),
navBarHeight = $(".nav").height();
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: (target.offset().top) - navBarHeight
}, 1000);
}
});
显然,更改 $(".nav")
以根据您的目的使用正确的选择器。您还可以通过向 navBarHeight
.