Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Daniel Hambor
PLUS
Daniel Hambor
Courses Plus Student 1,850 Points

Forced position div jitters with mouse wheel

Hey, first time postin on the forums here, and I'm not even sure if I can ask questions that don't exactly pertain to the videos.

My issue is that I created a div where, when I scroll up and down, the position remains absolute and scrolls with the page. It works fine, but what is bothering me is when I scroll using the mouse wheel versus the scroll bar, it jitters horrendously. Any help would be wonderful. :C

<div class="preHeader">
    <div class="inHeader">
        <img src="images/home.png" class="center">
    </div>
    <div class="inHeaderExt">
        <p>INFO  |  TASKS  |  STOCKS</p>
    </div>
</div>
.preHeader
{
    margin-left:9em;
    height:6em;
    width:18em;
    position:absolute;
}
.inHeader
{
    margin-left:1em;
    height:4em;
    width:4em;
    background-color:rgba(51,51,51,.9);
    position:absolute;
}
.inHeaderExt
{
    margin-left:5em;
    height:3em;
    width:12em;
    background-color:rgba(255,255,255,.9);
    position:absolute;
    text-align:center;
}
var $inHeader = $(".inHeader");
var $inHeaderExt = $(".inHeaderExt");

function scrollBar (div) {
    $(document).ready(function () { 
        var top = div.offset().top - parseFloat(div.css('marginTop').replace(/auto/, 0));
        $(window).scroll(function (event) {
            var y = $(this).scrollTop();
            if (y >= top) {
               var difference = y - top;
               div.css("top",difference);
           }
       });
    });
};
scrollBar($inHeader);
scrollBar($inHeaderExt);

4 Answers

Chris Scott
Chris Scott
7,673 Points

Checkout StickUp covered in the last TeamTreeHouse Podcast.

Tom Bedford
Tom Bedford
15,645 Points

When .preHeader has position:fixed; it doesn't judder for me.

Perhaps making the JS add another class to preHeader when a certain distance from the top of the page, and with that new class add rules to change positioning to fixed and adjusting distance from the top of the page if needed.

I'm sure that is possible with JS but I'm not certain on how to write it!

So you would have:

<div class="preHeader">
    <!-- stuff -->
</div>

The JS would detect when x distance from the top and add a class of "fixed" to the .preHeader div.

<div class="preHeader fixed">
    <!-- stuff -->
</div>

and your css would have:

.preHeader
{
    margin-left:9em;
    height:6em;
    width:18em;
    position:absolute;
}

.inHeader
{
    margin-left:1em;
    height:4em;
    width:4em;
    background-color:rgba(51,51,51,.9);
    position:absolute;
}

.inHeaderExt
{
    margin-left:5em;
    height:3em;
    width:12em;
    background-color:rgba(255,255,255,.9);
    position:absolute;
    text-align:center;
}

.fixed {
    position: fixed;
    top: 2em;
}

Hope that makes some sense, good luck!

Daniel Hambor
PLUS
Daniel Hambor
Courses Plus Student 1,850 Points

It does, yeah. It is smoother, but it's way faster just using position:fixed alone. As far as doing that in JS, I wouldn't know how to go about that myself.

Daniel Hambor
PLUS
Daniel Hambor
Courses Plus Student 1,850 Points

StickUp worked nice! Thanks to both you for your help. C: