blixhavn / sticky-sidebar-v2

Pure JavaScript tool for making smart and high performance sticky sidebar.
https://blixhavn.github.io/sticky-sidebar-v2/
MIT License
58 stars 25 forks source link

It streches the whole page body when the page is scrolled up. #17

Closed ghost closed 2 years ago

ghost commented 2 years ago

Hello @blixhavn Thank you so much for updating sticky-sidebar to V2 !! I really like when projects are alive even updates in long periods. So thanks.

I tried to replace import StickySidebar from 'sticky-sidebar'; by import StickySidebar from 'sticky-sidebar-v2'; and without changing anything else (except removing ResizeSensor). It seems to be working (I'm a CSS absolute ignorant).

Now the problem (as it was working fine with the old version ) is when I scroll the page to the top, there I see the sidebar going on top of everything else (stretching the page).

This is my HTML:

<div class="main-content">
    <div id="sidebar" class="sidebar">
      <div class="sidebar__inner">
        <nav class="nav flex-column" id="sidebar_nav">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Sections</a>
            <a class="nav-link" href="/listings/blogs"><i class="fa fa-book"></i><span>&nbsp;Blogs</span></a>
             .... others
        </nav>
      </div>
    </div>
    <div id="content" class="content">
        ...

And my Js

var sidebar = new StickySidebar('#sidebar', {
        topSpacing: 60,
        bottomSpacing: 60,
        containerSelector: '.main-content',
        innerWrapperSelector: '.sidebar__inner',
        // disable for small screens
        minWidth: 768
});

This is a capture:

image

Thanks a lot !!!

ghost commented 2 years ago

I switched the side-bar div and bootstrap container and it works