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

JavaScript

Daniel Hambor
PLUS
Daniel Hambor
Courses Plus Student 1,850 Points
Posted by Daniel Hambor
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
Chris Scott
Chris Scott
7,673 Points

Checkout StickUp covered in the last TeamTreeHouse Podcast.

Tom Bedford
Tom Bedford
15,645 Points
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
Daniel Hambor
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
Daniel Hambor
Daniel Hambor
Courses Plus Student 1,850 Points

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