[英]Smooth scroll for multiple fixed navbar with different height
我有一個固定頂部的導航欄(高度為75px),具有平滑滾動,非常適合桌面。 當我在小屏幕上時,我會使用另一個導航欄(高度為50px),高度較小,因此錨點到達正確的位置。
// Smooth Scoll
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//,'')
&&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top -75
}, 1200, function() {
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
} else {
$target.attr('tabindex','-1');
$target.focus();
};
});
}
}
});
我希望能夠根據單擊的導航欄設置target.offset().top
。 請不要CSS解決方案。
添加屏幕寬度檢查並將75更改為50
// Smooth Scoll
$('a[href*="#"]').not('[href="#"]') .not('[href="#0"]').click(function(event) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
event.preventDefault();
$('html, body').animate({
// change dependant on screen width
if ($(window).width() < 960) { // set in px
scrollTop: target.offset().top -50
} else {
scrollTop: target.offset().top -75
}
}, 1200, function() {
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
} else {
$target.attr('tabindex','-1');
$target.focus();
};
});
}
}
});
或者,您也可以,這樣可能會更好地獲得單擊時的導航高度
//set nav
var nav = $('.nav-bar'); // update to your nav class
// Smooth Scoll
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {
// get nav height
var NavHeight = nav.height();
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname ) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
event.preventDefault();
$('html, body').animate({
// minus nav height
scrollTop: target.offset().top - NavHeight
}, 1200, function() {
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
} else {
$target.attr('tabindex','-1');
$target.focus();
};
});
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.