Плавная прокрутка для нескольких фиксированных панелей навигации с разной высотой

У меня есть навигационная панель с фиксированным верхом (высота 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({
                   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-решений, пожалуйста.


javascript jquery css smooth-scrolling
person Louis Philippe    schedule 02.12.2017    source источник
comment
просто замените 75 на высоту навабара. Или добавить условие с экраном добавить 75 или 50   -  person Temani Afif    schedule 02.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте проверку ширины экрана и измените 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();
                   };
               });
           }
       }
});
person Jim-miraidev    schedule 02.12.2017
comment
Работает отлично, только что изменил // получить высоту навигации var NavHeight = nav.Height(); чтобы // получить высоту навигации var NavHeight = nav.height(); - person Louis Philippe; 03.12.2017
comment
извините, я пропустил это, я обновил код выше. Я использовал .outerHeight() и случайно оставил заглавную букву H - person Jim-miraidev; 03.12.2017