Side navbar не реагирует

Question

Я хотел сделать scover-able bootstrap side nav, который полностью реагирует. Я искал все возможные способы в разных ссылках и сайтах, но я не достигаю того, чего хочу.

Итак, вот моя проблема: Я хочу, чтобы на всех экранах мультимедиа была полнофункциональная навигационная панель. Он работает нормально на больших экранах, но на небольших экранах смещение, которое я установил в сторону nav, не соответствует, и я не думаю, что можно добавить смещение в каждом отдельном экране с помощью jquery. Итак, пожалуйста, кто-нибудь может помочь мне с этой проблемой? Ниже приводится ссылка на JSFiddle, что я создал, и это JQuery, что я использую:

$(document).ready(function() { 
    $("#myNav").affix({ 
    offset: { 
     top: 1100, 
     bottom: ($('.other').outerHeight(true)) + 445 
    } 
    }); 

    $("#myNav").on('affixed.bs.affix'); 
}); 

$('#myNav a[href*=#]:not([href=#])').click(function() { 
    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) { 
     $('html,body').animate({ 
     scrollTop: target.offset().top - 50 
     }, 1000); 
     return false; 
    } 
    } 
}); 

https://jsfiddle.net/sheela_paudel/yncauzo7/1/

Заранее спасибо за вашу помощь. Это значит многое. Я также хотел спросить, можем ли мы дать значение смещения в процентах, а не в пикселях.

Answer 1

Я сделал некоторые изменения в JS, чтобы установить смещение от верхней и нижней части с помощью класса или ID

$(function(){ 
    var stickyElement = '#myScrollspy', 
    bottomElement = '.other'; 
    if($(stickyElement).length){ 
    $(stickyElement).each(function(){ 
    var fromTop = $(this).offset().top, 
    fromBottom = $(document).height()-($(this).offset().top + $(this).outerHeight()), 
    stopOn = $(document).height()-($(bottomElement).offset().top)+($(this).outerHeight() - $(this).height()); 
     if((fromBottom-stopOn) > 200){ 
     $(this).css('width', $(this).width()).css('top', 0).css('position', ''); 
     $(this).affix({ 
     offset: { 
     bottom: stopOn 
     } 
     }).on('affix.bs.affix', function(){ $(this).css('top', 0).css('position', ''); }); 
      } 
     $(window).trigger('scroll'); 
     }); 
     } 
     }); 

Вы можете преодолеть с ним, используя Jquery

you can see it in this link

var stickyElement = '#myScrollspy', bottomElement = '.other';

просто укажите имя или идентификатор класса в этих двух строках, чтобы получить смещение сверху и снизу.

Надеюсь, это поможет вам.