jquery - 侧导航栏没有响应

Question

我想制作一个完全响应式的可滚动 Bootstrap 侧边导航。我已经在不同的链接和站点中搜索了所有可能的方法，但没有达到我想要的效果。

所以这是我的问题:我想要一个在每个媒体屏幕上都能完全响应的侧边导航。它在大屏幕上表现正常，但在小屏幕上，我为侧导航设置的偏移量不匹配，我认为不可能通过 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';

只需在这两行中给出您想要的类名或 ID 即可从顶部和底部偏移。

希望对您有所帮助。