Javascript 在滚动jquery时，如何使具有活动类的元素可见？

我有一个网站，有一个博客部分。每篇文章在单独的块中都有自己的内容。内容块在阅读了大约5%的文章后显示。当您滚动浏览文章时，内容元素被指定为“活动”类。但问题是，如果监视器的大小很小，整个内容块就无法显示在屏幕上，并且在某个时候，具有活动类的元素会从视图中消失。我想让页面滚动时，块内的内容也会滚动，这样活动元素在这个块中总是可见的。它只适用于这个街区

看起来像这样

html内容块：

<div class="blog-nav-wrap fix">
<div class="blog-nav">
   <div class="blog-nav-title">Сontent of the article</div>
   <ol>
      <li class="">
         <a href="#">Titles of parts of the first half of the article</a>
         <ol>
            <li class=""><a href="#">article item 1</a></li>
            <li class=""><a href="#">article item 2</a></li>
            <li class=""><a href="#">article item 3</a></li>
            <li class="active"><a href="#">article item 4</a></li>
            <li class=""><a href="#">article item 5</a></li>
         </ol>
      </li>
      <li class="">
         <a href="#">Names of parts of the second half of the article</a>
         <ol>
            <li class=""><a href="#">article item 6</a></li>
            <li class=""><a href="#">article item 7</a></li>
         </ol>
      </li>
   </ol>
   <div class="blog-send-email"><span>Send the article to email</span></div>
</div>

我在互联网上读了很多书，看到了很多解决方案，但我不知道在这种情况下我应该做得最好。我尝试使用Element.scrollIntoView（），如下所示，但它会破坏我的页面，阻止我向下进入页脚或向上进入页眉。我不熟悉使用jquery，正在等待任何帮助

    ...
      $('.blog-nav li a[href="#'+id+'"]').parent().addClass('active');
        $('.active')[0].scrollIntoView();
    }
    else
    ...

    ...
      $('.blog-nav li a[href="#'+id+'"]').parent().addClass('active');
        $('.active')[0].scrollIntoView();
    }
    else
    ...