Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Andre Novak
Andre Novak
10,751 Points
Posted by Andre Novak
Andre Novak
10,751 Points

Sidebar transitions fixed content bug

Hey!

I use SidebarTransitions http://tympanus.net/Development/SidebarTransitions/ in my project

I cant scroll the document when mouse is over the fixed div. http://awesomescreenshot.com/00f38cqa11

<div class="st-content"><!-- this is the wrapper for the content -->
    <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
    <!-- Top Navigation -->
    <div class="codrops-top clearfix"></div>
    <header class="codrops-header"></header>
    <div class="main clearfix">
        <div id="st-trigger-effects" class="column"></div>

        <!-- HERE IT STARTS -->
        <div class="column" style="position: fixed">
            <p>Sidebar menus or off-canvas navigations can be revealed in many creative ways.</p>
            <p>Here is some inspiration for showing them in style using CSS transitions.</p>
        </div>
        <!-- HERE IT ENDS -->

I removed height: 100%; from its wrappers, and scroll now works well, but sidebar doesn't take all the height of the document.

Any ideas how to fix this?

P.S. SidebarTransitions uses css for transitions and I really like it. But it relies on classie.js for small features and has some unnecessary code. I've removed it and made SidebarTransitions compatible with jquery. If anyone is interested I can share, just let me know in the comments.

2 Answers

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

This sounds like JavaScript is interfering with mouse behaviour.

Likely a conflict from your "unnecessary" code and a conflict with JQuery.

JQuery has default functions and mouse behaviors built in to handle things like mouse-overs on menus and changing scroll landing, etc.

My instinct says you used JQuery to create the sidebar?

My suggestion: ditch the half-assed Sidebar code and checkout Bootstrap.

Andre Novak
Andre Novak
10,751 Points
Andre Novak
Andre Novak
10,751 Points

Thanks for response

It doesn't work with initial version also:)

The problem was that library sets CSS body {height:100%}

So I've changed most of the HTML and CSS and left some JavaScript.

And Bootstrap... It's styles just don't fit the design. And customizing its sass is awfull experience