[英]Smooth scroll for multiple fixed navbar with different height
I have a fixed-top navbar (75px height) with smooth scroll working perfectly well for desktop. 我有一个固定顶部的导航栏(高度为75px),具有平滑滚动,非常适合桌面。 When I'm on small screen I have a different navbar (50px height) with less height so the anchor dosent arrive a the right place. 当我在小屏幕上时,我会使用另一个导航栏(高度为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();
};
});
}
}
});
I want to be able to set the target.offset().top
depending on the navbar that is clicked. 我希望能够根据单击的导航栏设置target.offset().top
。 No css solutions please. 请不要CSS解决方案。
Add a screen width check and change the 75 to 50 添加屏幕宽度检查并将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();
};
});
}
}
});
Or you could, which might be better get the nav height on click 或者,您也可以,这样可能会更好地获得单击时的导航高度
//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.