Question

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

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

来克服它

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

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

希望这会对你有所帮助。

侧导航栏无响应

1 个答案: