Question

我有一个固定顶部导航栏（75px高度），平滑滚动非常适合桌面。当我在小屏幕上时，我有一个不同的导航栏（50px高度），高度较低，所以锚定剂到达正确的位置。

#import ...

我希望能够根据点击的导航栏设置// 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(); }; }); } } });。请不要使用CSS解决方案。

Answer 1

添加屏幕宽度检查并将75更改为

// 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();
                   };
               });
           }
       }
});

平滑滚动多个不同高度的固定导航栏

1 个答案: